Changelog
40 effects so far. Grouped by the week they were added. RSS
Featured light A burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.
Featured medium Moving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.
Featured WebGL Twenty-four procedurally painted posters spiral down a fog-filled tunnel; wheel, drag or swipe sets the camera's speed, idle autoplay keeps it drifting, and plane depths wrap modulo the loop so the archive never ends.
Featured WebGL A Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.
Featured light A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.
Featured WebGL Thirty thousand additive points morph between a sphere, a torus knot, a cube and a heart; every particle starts on its own random schedule and takes a swirling detour, so each change of shape reads as a swarm rather than a slide.
Featured light A full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.
Featured WebGL A noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.
Featured light A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
Featured medium A pinned full-viewport canvas plays a 90-frame sequence scrubbed by scroll — the frames are generated procedurally at load (a turning wireframe ring in soft gradients and grain), with a mono frame counter and headlines that hand over at 30% and 70%.
Featured light A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.
Featured medium A pinned hero where the display word DEEPER is punched out of a page-coloured panel; scrolling scales the word 40× around the stem of one letter so the camera flies through it and the image panel behind is revealed.
light Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.
light Five hairline-ruled FAQ items open with a true height-from-zero-to-auto tween; the plus rotates into a cross, the copy slides up a beat later, the index turns lime and the previously open item closes at the same time.
light Three button variants share a 1px conic-gradient ring that orbits forever via a GSAP-tweened --angle; hovering triples the orbit speed, sweeps a highlight across the face and rolls the label up to a second copy. Active presses scale to 0.97.
light A 16:10 comparison frame with a warm graded 'after' and a flat, desaturated 'before' derived from it on canvas; a lime Draggable handle clips the top layer, with keyboard, click-to-jump and an intro sweep to 60% and back.
light A bento-style grid of nine mixed-span tiles is filtered by a pill bar; GSAP Flip records the layout, toggles visibility, then glides every surviving tile into its new slot while leaving tiles shrink away.
light A white disc in mix-blend-mode: difference trails the pointer with a 0.12 lerp, inverting headlines, a lime block and an image as it passes, swelling from 24px to 120px over links with a tiny label and pulsing a ring on click.
light A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
light Clicking a nav link closes six vertical slats over the page from the top, draws a monogram and wordmark with a 00→100 counter, swaps the content underneath, then opens the slats from the bottom as the new page rises in.
light An editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.
light Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.
WebGL A GLB perfume flask idles on a slow turntable under a key/fill/rim studio rig with a soft contact shadow; drag to orbit with damping, pick a finish to tween the PBR colour, and labels track points on the model.
light A self-running motion poster: seven stacked rows of the same word, from hairline to black, shear and slide in alternating directions on a yoyo loop while a secondary word flips over in 3D every 1.6 seconds.
light An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
light Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
light A glowing SVG form morphs circle → square → blob → star → mark while a hairline outline traces each new shape and a percentage climbs; at 100% the form scales 40× to fill the viewport and fades into the page.
medium A full-screen fragment shader blends four drifting colour fields through domain-warped simplex noise, adds animated film grain and a soft vignette, and lets the pointer gently pull the warp; a CSS gradient stands in when WebGL or motion is unavailable.
light A three-page demo where every navigation runs one timeline: a surface panel and a lime panel wipe up from the bottom (0.8s power4.inOut, stagger 0.08), the page swaps beneath, then they exit upward as the new content rises in.
light A tall hero built from five depth layers — sky, far ridge, mid ridge, foreground and headline — each scrubbed at its own yPercent speed from a data-speed attribute, plus a lerped pointer parallax on desktop that tilts the scene toward the cursor.
WebGL Four image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.
light A long grid of gradient tiles and oversized words shears up to ±8° and shrinks slightly in proportion to scroll velocity, then eases back to zero in 0.8s; a mono readout shows the live velocity and skew.
light A long vertical SVG route draws itself as you scroll (DrawSVG 0% → 100%, scrubbed) while a glowing dot rides the pen tip via MotionPath; four station dots pop in with a back.out(2) overshoot and their labels slide in as the line reaches them.
light Clicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.
light Five full-width cards pin in sequence as you scroll; each arriving card slides over the previous one, which scales down to 0.9 and dims behind a translucent overlay, so the section ends as a neat stepped stack.
light A two-column feature: the left visual column is sticky for the whole section while four text chapters scroll by on the right; each chapter crossing the centre swaps the visual with a directional crossfade and lights its progress dot.
light A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
light Four triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.
light A single display word split into characters whose font weight (300 → 900) and SOFT axis follow the pointer with a Gaussian falloff; leaving sends a left-to-right ripple back to rest, and touch devices get an automatic looping wave.
WebGL Four figures in a normal scrolling page are mirrored by WebGL planes on one fixed canvas, matched to their DOM rectangles every frame; the planes bow and ripple with scroll velocity in the vertex shader and zoom slightly on hover.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…