Thư viện Hiệu ứng Trực quan

Hiệu ứng 2D và 3D tương tác bởi Canvas và WebGL. Khám phá 114 hiệu ứng trong 10 danh mục — chỉ cần trình duyệt, không cần cài đặt.

114
Hiệu ứng
10
Danh mục
100%
Miễn phí

Hiệu ứng 3D

16

Cảnh 3D, shader và raymarching bằng Three.js

Thiên hà hạt 3D
Thiên hà xoắn ốc 8000 hạt Three.js với tương tác thị sai chuột
Cầu hạt 3D
Cầu mây điểm 5000 hạt Three.js, chuột đẩy phân tán và tụ lại
Biển động 3D
Biển sóng động ShaderMaterial Three.js, chuột tạo gợn sóng
Địa hình 3D thủ tục
Địa hình gồ ghề Simplex noise Three.js, bốn phong cách cảnh quan
Đường hầm neon 3D
Đường hầm hình học neon góc nhìn thứ nhất Three.js
Khúc xạ pha lê 3D
Khúc xạ pha lê thủy tinh trong suốt MeshPhysicalMaterial Three.js
Xoáy hạt 3D
Xoáy hạt hình lốc xoáy Three.js, sức hút và đẩy chuột
Khối lập phương nổi 3D
Khối lập phương nổi vật liệu PBR Three.js, tương tác trọng lực chuột
Cánh sao 3D
Bay xuyên tinh vân góc nhìn thứ nhất Three.js
Đường cong Lissajous 3D
Vệt hạt đường cong Lissajous 3D Three.js, thông số có thể điều chỉnh
Cây fractal 3D
Các nhánh phân đôi đệ quy mọc thành cây 3D, đầu nhánh điểm những chiếc lá phát sáng đung đưa theo gió.
Lưới vô hạn 3D
Sàn lưới neon trải dài vô tận về phía chân trời, các đường lưới cuộn về trước tạo cảm giác lao vút kiểu synthwave.
Cầu Raymarching 3D
Shader mảnh toàn màn hình bước tia cho từng pixel tiến tới mặt cầu gợn sóng, tính pháp tuyến và ánh sáng theo thời gian thực.
Khiên năng lượng 3D
Lớp vỏ phát sáng Fresnel mang hoa văn năng lượng lục giác, mỗi cú đánh tạo sóng xung kích lan từ điểm va chạm.
Cổng dịch chuyển 3D
Vòng phát sáng bao quanh đĩa năng lượng xoáy, hoa văn cuộn theo tọa độ cực trong khi các hạt bị hút vào tâm cổng.
Địa cầu khung dây 3D
Một địa cầu phát sáng phác bằng các đường kinh vĩ tuyến quay chậm, với các nút nhấp nháy rải trên bề mặt.

Hạt

15

Hệ thống hạt, bầy và pháo giấy

Pháo hoa hạt
Pháo hoa hạt Canvas với hiệu ứng tương tác
Đom đóm
Điểm sáng lang thang với vệt sáng và sức hút chuột
Hạt tương tác chuột
Lưới hạt, va chạm chuột phân tán và tụ lại
Hạt sao
Hạt tinh vân thiên hà, xoay và nhấp nháy
Biến hình hạt
Cùng một đàn hạt sắp xếp lại mượt mà giữa hình tròn, vuông, sao, tim và xoắn ốc — số lượng không đổi, mỗi chấm chỉ bay tới đích mới.
Particle Painting
Paint with particles or fluid on canvas, multiple brush effects
Máy đánh chữ hạt
Chữ hiện ra từng ký tự, mỗi chữ được tạo từ các hạt bay vào từ mọi phía, rồi tan ra và bắt đầu lại.
Vệt chuột
Một dòng hạt màu sắc đuổi theo con trỏ rồi mờ dần; khi đứng yên, con trỏ tự lang thang theo đường cong mượt mà.
Nối chòm sao
Hạt sao với đường nối chòm sao vẽ bằng chuột
Giếng trọng lực
Hạt quay quanh điểm trọng lực trung tâm Canvas 2D, giống hệ hành tinh
Cosmic Collapse
Particle gravitational collapse simulation with merging, density coloring and disk formation
Soul Ring Halo
Multi-layer glowing soul rings from white to gold, rotating with particle drift effects
Thiên hà xoắn ốc
Hoạt ảnh hạt thiên hà xoắn ốc xoay Canvas 2D
Thiên hà xoắn ốc 2D
Hoạt ảnh hạt thiên hà xoắn ốc Canvas 2D
Bắn pháo giấy
Hiệu ứng nổ hạt pháo giấy Canvas 2D chúc mừng

Chất lỏng & Vật lý

18

Động lực học chất lỏng, vải, lửa và mô phỏng vật lý

Mô phỏng chất lỏng
Mô phỏng động lực học chất lỏng 2D với tương tác chuột
Nền gradient chất lỏng
Những mảng màu mềm trôi và hòa quyện như chất lỏng, tạo nền gradient động tối giản mà sang trọng.
Fluid Text
Fluid particles form into text after interaction
Gợn sóng nước
Hiệu ứng gợn sóng nước Canvas 2D, nhấp chuột và tương tác chuột
Mô phỏng vải
Tích phân Verlet mô phỏng tấm vải treo rủ xuống dưới trọng lực; kéo để giật và thêm gió.
Mô phỏng lửa
Thuật toán lửa cổ điển theo từng điểm ảnh tạo ra ngọn lửa nhảy múa; chỉnh cường độ và khơi lửa bằng con trỏ.
Khói bay lên
Hiệu ứng hạt khói bay lên và khuếch tán
Đèn núi lửa
Hiệu ứng chập chờn đèn núi lửa Canvas 2D, các blob hợp nhất và tách ra
Thạch nảy
Một khối thạch mềm nảy dưới trọng lực, bẹp xuống khi tiếp đất rồi bật lại kèm rung rẩy; nhấp để chọc nó.
Tranh cát hạt
Những hạt cát màu đổ xuống từ trên, trượt theo dốc và chất thành đụn; kéo để rót cát ở bất cứ đâu.
Phản ứng khuếch tán
Phản ứng khuếch tán Gray-Scott tạo hoa văn san hô và đốm
Hiệu ứng khúc xạ nước
Mô phỏng ánh nắng khúc xạ qua mặt nước, tạo những vệt sáng dạng lưới lay động dưới đáy.
Mây thể tích
Nhiễu chuyển động Brown phân dạng nhiều lớp tạo nên những đám mây thể tích cuộn trào và trôi theo từng điểm ảnh.
Mây động
Hiệu ứng mây trôi động Canvas 2D
Bong bóng bay lên
Mô phỏng vật lý bong bóng nhiều màu bay lên Canvas 2D
Bong bóng trôi nổi
Hiệu ứng bong bóng nhiều màu trôi nổi bay lên
Mực lan
Hiệu ứng khuếch tán mực nhoè Canvas 2D
Tia sáng thần
Ánh sáng xuyên qua khe hở tạo thành các chùm sáng thể tích tỏa ra; kéo nguồn sáng và đổi màu.

Vũ trụ & Thiên văn

9

Hành tinh, sao và hiện tượng vũ trụ 3D

Solar System
3D solar system with 8 planets orbiting, Saturn rings, planet labels and starfield
Earth-Moon System
3D Earth-Moon orbital simulation with Earth rotation, Moon orbit, moon phases and starfield
Binary Star System
3D binary star simulation with barycenter orbit, accretion stream and 3 star type presets
Three-Body Problem
N-body gravitational chaos simulation with figure-8, Lagrange, chaotic and hierarchical presets
Day-Night Earth
3D Earth day-night terminator, city lights, sun angle and axial tilt control
Eclipse Simulator
Solar and lunar eclipse 3D simulation with shadow cones, inclination and coverage detection
24 Solar Terms
Earth orbit through 24 solar terms with fixed axial tilt, seasonal colors and term markers
Gravitational Wave
Spacetime grid ripples from binary inspiral, single pulse and continuous wave sources
Thấu kính hấp dẫn hố đen
Hố đen bẻ cong ánh sáng bằng lực hấp dẫn khổng lồ, kéo giãn ánh sao nền thành vòng Einstein rực sáng.

Ánh sáng & Phát sáng

12

Neon, plasma, laser và năng lượng phát sáng

Ánh sáng neon
Ánh sáng Bloom, dải đèn neon, nhịp thở màu sắc
Cầu plasma
Hiệu ứng sét cầu plasma cổ điển
Trường plasma
Hiệu ứng plasma cổ điển Canvas 2D với màu sắc chảy
Tia laser
Phản xạ tia laser Canvas 2D với hiệu ứng hạt
Bão sét
Hiệu ứng tia sét Canvas 2D, thông số có thể điều chỉnh
Đường hầm ánh sáng
Phép chiếu phối cảnh kéo dài họa tiết màu dọc theo đường hầm vô tận, tạo ảo giác bay mãi về phía trước.
Bẻ cong ánh sáng
Một lưới màu bị bẻ cong, kéo giãn và khúc xạ bởi một tâm hấp dẫn dạng thấu kính, gợn sóng chảy theo con trỏ.
Vòng xung năng lượng
Những vòng năng lượng bùng ra từ tâm, lan rộng và mờ dần; nhấp vào bất kỳ đâu để tạo xung mới.
Chiếu hologram
Hoa văn động hologram với lớp phủ dòng quét
Lưới ba chiều ảo
Lưới lùi theo phối cảnh lấp lánh sắc màu ba chiều ảo khi một vạch quét lướt qua, mang cảm giác HUD viễn tưởng.
Xung màu
Hiệu ứng xung nhịp thở màu sắc với chuyển động nhịp nhàng
Lộ mặt nạ động
Một họa tiết màu chuyển động ẩn dưới nền tối, chỉ lộ ra ở nơi mặt nạ đèn rọi lang thang quét qua.

Glitch & Cổ điển

15

CRT, đường quét, mưa matrix và biến dạng kỹ thuật số

Nghệ thuật glitch
Tách RGB, dòng quét, hiệu ứng glitch xé màn hình
Sóng trục trặc
Một ảnh màu chuyển động bị xé rách bởi lỗi kỹ thuật số: lát cắt xô lệch, tách kênh RGB và đường quét rung.
Hiệu ứng CRT
Đường quét, sọc lân quang RGB, viền tối và dải sáng cuộn chậm tái hiện vẻ ngoài của TV đèn hình cũ.
Đường quét
Các đường quét mảnh phủ toàn khung trong khi một dải sáng lặp lại quét xuống, gợi màn dao động ký và CCTV, đổi tông màu được.
Mưa Matrix
Hiệu ứng mưa mã kiểu Matrix Canvas 2D rơi xuống
Mã rơi
Hiệu ứng mưa ký tự mã nhiều màu rơi xuống
Vân Moiré
Hai lưới gần như giống hệt chồng lên nhau; chỉ cần lệch hoặc xoay nhẹ là giao thoa thành vân moiré chuyển động, chuyển giữa vòng tròn và đường thẳng.
Kết cấu nhiễu
Kết cấu nhiễu thủ tục biến đổi từng khung hình, chuyển giữa nhiễu tivi và làn sương mềm trôi.
Sắp xếp điểm ảnh
Chia mỗi cột điểm ảnh theo ngưỡng độ sáng rồi sắp xếp lại, kéo hình ảnh thành các vệt nghệ thuật lỗi trôi chảy.
Pixel hóa
Một khung cảnh màu chuyển động được lấy mẫu xuống thành các khối mosaic thô, với kích thước khối điều chỉnh được.
Sai sắc/Lệch RGB
Ba kênh đỏ, lục, lam được dịch theo các hướng khác nhau rồi ghép lại, tạo viền màu như sai sắc ống kính, độ lệch điều chỉnh được.
Tán sắc lăng kính
Một chùm ánh sáng trắng đi vào lăng kính và tán sắc — mỗi bước sóng khúc xạ khác nhau — trải ra thành quang phổ cầu vồng.
Làm mờ xuyên tâm
Hình ảnh được phóng to theo từng bước và hòa trộn quanh tâm, tạo hiệu ứng mờ zoom bung ra ngoài, cường độ điều chỉnh được.
Khảm động
Một ảnh chuyển động vỡ thành các ô khảm với kích thước phập phồng theo thời gian, đồng thời rung và nhấp nháy nhẹ.
Cầu vồng động
Các dải cầu vồng gợn sóng và cuộn trong khi sắc màu luân chuyển liên tục, chuyển được giữa chế độ sóng, vòng và tia.

Phân hình & Hình học

13

Nghệ thuật toán học, mẫu sinh và đồ thị

Nhà Thám Hiểm Fractal
Phóng to vô tận tập Mandelbrot với nhiều bảng màu.
Tập Julia
Fractal tập Julia biến đổi theo hằng số phức trôi dạt
Sơ đồ Voronoi
Các điểm hạt di chuyển chia không gian thành khảm Voronoi
Spirograph
Vẽ những đường cong mê hoặc bằng cách chỉnh bánh răng, tốc độ và màu sắc.
Vạn hoa kính
Vạn hoa kính hình học phản xạ đối xứng Canvas 2D
Đường đồng mức
Đường đồng mức địa hình động trên trường nhiễu biến đổi
Ô tự động
Trò chơi cuộc sống Conway tiến hóa với vệt sáng
Kết tụ giới hạn khuếch tán
Các hạt đi lang thang ngẫu nhiên dính lại ngay khi chạm cấu trúc đã có, dần mọc thành nhánh fractal như bông tuyết.
Trường dòng chảy
Vô số hạt trôi theo trường vector dựa trên nhiễu, vẽ nên những vệt mượt như gió hay dòng hải lưu.
Hình học biến dạng
Ô lưới nhịp điệu, gợn đồng tâm, họa tiết chảy
Lưới gradient
Hiệu ứng màu lưới gradient chảy
Đồ thị lực
Các nút nối bằng lò xo và đẩy nhau; hệ tự cân bằng, gỡ rối các liên kết thành mạng lưới rõ ràng.
Trực quan trường từ
Hiển thị đường sức từ trường Canvas 2D với chuyển động hạt

Hiệu ứng chữ

6

Chữ được tạo và hoạt hình bằng hạt

Hạt Chữ
Nhập văn bản bất kỳ và hàng nghìn hạt bay tụ thành hình; nhấp để phân tán rồi tụ lại.
Firework Text
Fireworks explode then particles converge into text, then disperse
Confetti Text
Confetti explodes into text, holds, then explodes again
Firefly Text
Fireflies drift, converge into text, then disperse
Fluid Text
Fluid particles form into text after interaction
Particle Text
Mouse-collided particles form text, then reform grid

Thiên nhiên & Thời tiết

6

Mưa, tuyết, cực quang và bầu không khí tự nhiên

Hiệu ứng mưa
Giọt mưa, gợn nước, giọt nước trên kính
Tuyết rơi
Tuyết rơi phối cảnh 3D với ảnh hưởng gió
Cực quang
Hoạt ảnh cực quang gradient Canvas 2D, dòng chảy động
Giao thoa sóng
Mô phỏng giao thoa khe đôi / chồng sóng nước Canvas 2D
Hiển thị sóng
Hiệu ứng hiển thị sóng âm động
Trực quan âm thanh
Hoạt ảnh hiển thị phổ tần số âm thanh

Văn hóa Đông phương

5

Thái cực, Kinh Dịch, cung hoàng đạo và kinh lạc

Taiji Rotation Patterns
Yin-yang symbol rotating at variable speeds, trail strobe creates moiré interference patterns
I-Ching Compass
Multi-ring compass: 64 hexagrams + 8 trigrams + 24 mountains + Taiji center
Zodiac Ecliptic
Elliptic ecliptic band with 12 zodiac signs and star connections, switchable views
Zodiac Time Dial
12 Chinese hours dial with zodiac animals, pointer tracks current time
Meridian & Acupoints
3D human body with 14 meridians and major acupoints, hover for acupoint info