fx, copy-paste effects
Award-site patterns as Tailwind + CSS you can actually paste. No 47 KB tax. Effects ship three formats; Sections show the complete CLI source, CSS included. Machine-readable: llms.txt.
Reveals
Staggered revealChildren rise in sequence when the section enters the viewport.
Deck spreadA centered card deck deals itself into the grid. On arrival or scrubbed.
Pinned scenes
CurtainTwo panels slide apart as you scroll through a pinned stretch.
Horizontal railVertical scroll travels a horizontal track through a pinned stage.
Sequenced scrubEach child animates over its own slice of the pin. Choreography without a timeline.
Wall to floor foldCopy runs down a wall and, at the fold, keeps going onto the floor toward you. A clone in perspective, --sv-pin driving both.
Interop
GSAP timeline under scrubAuthor the choreography in GSAP, let ScrollVars drive it. One listener, one writer.
Three.js scene on the pinA WebGL scene scrubbed by scroll. The canvas harness runs the lifecycle, Three renders.
Text
Split revealA headline broken into words, each rising on its own beat, SplitText without the engine.
Rotating wordsOne word exits up, the next rises from below. A clipped column on one variable.
Pointer
Pointer tiltCards tilt toward the cursor with a moving glare. One delegated listener.
Cube windowsA box turns in 3D as the section scrolls by and tilts to the pointer; its outline becomes the clip-path of the photo inside. The photo itself never moves.
Sliders
Coverflow sliderNative-scroll carousel; slides scale, fade and turn by their distance from center.
MarqueeAn infinite strip (logos, taglines) that pauses on hover.
Sections
Cinematic heroSplit headline rising on a beat, pointer-parallax glow, a marquee strip, and the whole block fades out as you scroll past (--sv-t).
Pinned timelinePin the section; the scroll draws the line, counts the year and lights each milestone over its own slice of the pin.
Sticky stepsMedia stays put while the copy scrolls; each step swaps the shot. The product-page pattern, with --sv-scene doing the swapping.
Stats count-upNumbers count from zero when the block enters. CSS counters + a registered property. The transition IS the animation.
Case-study railOversized project cards traverse a pinned stage with --sv-pin; long content returns to a readable list.
Editorial manifestoBig statements gain contrast in sequence as --sv-t advances. Natural document flow, no pin and no split spans.