Tag: 前端实验室
能直接操作的浏览器实验，以及背后的实现代码。
实验瓶
4 notes tagged 前端实验室
Text reveal: complete runnable code
Split a line into independent elements, then give each one an increasing delay. Every variant builds on that. Zero dependencies.
Magnetic buttons and cursor follow: one formula, four outputs
Multiply the distance between the pointer and an element's center by a strength factor, then ease it with lerp. The same formula drives magnets, layered parallax, CSS spotlights, and 3D tilt.
Scroll storytelling: smooth scroll, pin, parallax, progress
A zero-dependency demo of four scroll storytelling techniques: smooth scrolling, pinned horizontal travel, parallax layers, and a scroll-driven counter, with a GSAP and Lenis counterpart.
Running 24,000 particles with raw WebGL
Generate the initial particle data once, then calculate each frame's positions in a vertex shader. The complete interactive demo runs inside the post.