Wolf Creek Showcase
Make Open in /new

Effects

Sixty web effects, followed by the Modern CSS, Page Transitions and CSS 2026 shelves. Every demo keeps its own code. Filter by tag.

01Live DOM + GPU shader

Quarterly build report

All 9 sites rebuilt from source. Zero live edits detected this week.

02CSS scroll-driven animations
↓ scroll
Reveal
Rotate
Scale
Blur → Sharp
Color shift
end
03View Transitions morph
04Liquid Glass refraction
REFRACTLIQUIDGLASS
05Kinetic variable typography
KINETIC TYPE
06WebGPU 3D scene
07Magnetic + 3D pointer
◎

Depth

Layered translateZ

08Pinned sticky scrollytelling
01
Live drifted. Edits landed on the server, not in git.
Reconcile. Pull every live change back into source.
Rebuild. Fresh build, then verify-live.sh diff.
Swap. The build goes live atomically.
Builds only. Rebuilding now reproduces live.
09Staggered bento grid reveal
9sites live
⚡LCP 2.1s
uptime99.98%
🛡
builds this week47
✓
10Custom cursor + micro-interactions
11Sticky header shrink NEW
Wolf CreekBuilds only

Scroll this panel. The sticky header compresses via scroll-timeline.

animation-timeline: scroll() drives padding and type without a single rAF.

Fallback toggles a scrolled class from the scroll event.

Keep going — the range finishes around 35% of the scroll distance.

End of demo content.

12Anchor-positioned tooltip swarm NEW
13Named view-timeline scrub NEW
view-timeline →
Oak
Coastal
Ember
Sage
14Canvas metaball cursor field NEW

move · metaballs

15List→detail shared-element morph NEW
16Cursor trail field NEW

move · trails

17SVG goo nav NEW

SVG feGaussianBlur goo

18Scroll progress chapters NEW
01 · Drift

Live edits landed outside git.

02 · Reconcile

Pull every change back into source.

03 · Rebuild

Fresh artifact, then verify-live.

04 · Swap

Atomic rename goes live.

19Flip-card wall NEW
20Kinetic grid warp NEW

pointer warps the grid

21Audio-reactive bars (fake) NEW
fake FFT · no mic
22Mosaic reveal NEW
BUILDS ONLYclick to shatter
23Ink splash transition NEW
BEFOREDrift on live
24Isometric hover tiles NEW
25Typewriter hero NEW
26Infinite logo wall NEW
27Magnetic gallery NEW

cards pull toward pointer

28Soft body blob NEW

drag the blob

29Confetti cannon NEW
30Glassmorphism stack NEW
Glass 01backdrop-filter
Glass 02blur + saturate
Glass 03layered depth
31Neon tunnel NEW

pointer steers

32Particle attractor 2D NEW

move · attract

33CSS-only loader family NEW

pure CSS · 6 loaders

34Staggered list scrub NEW
Deploy pipeline
Verify live diff
Atomic rename
Rollback ready
Observe metrics
Promote next
Archive artifact
end
35Horizontal snap stories NEW
01Oak plank
02Coastal
03Ember
04Sage
36Depth fog layers NEW

pointer parallax fog

37Mask wipe gallery NEW
Oak
Coastal
38Springy accordion wall NEW
39Shader-like gradient noise NEW
CSS noisefilter + gradient mesh
40Circular menu orb NEW

tap core · radial menu

41Tilt room · floor diorama NEW
Now showingWhite Oak7″ plank · $4.29/sq ft

move to tilt · tap the window

42Living grain · plant a knot NEW
Living graintap to plant a knot
43Flashlight · what's under the carpet NEW
0% uncovereddrag to rip it up
Found itOriginal 1950s white oakSand & refinish from $3.10/sq ft
44Plank ripple · floor waves NEW
Hand-scraped hickorytap the floor
45Sample deck · riffle & deal NEW
Your sample boarddeal a few chips here
46Exploded cabinet · drag it apart NEW
TFL Door · B18 base cabinetAssembled18″ W × 34½″ H × 24″ D · white melamine box

    drag sideways to spin · drag up to explode · tap the door

    47Lights out · under-cabinet LED NEW
    Under-cabinet LEDLights outTFL Door · Gloss Navy uppers

    flip the switch · drag to dim

    48Raking light · laminate inspector NEW
    Raking light inspectionSynchro-pore · raking 12°TFL Sawcut Oak · routed shaker
    49Door wall · flip to a picture NEW
    Door wallsweep to open the doors
    Every one cut to your size. Ships in 7 days.
    50Kettle steam · write on the gloss NEW
    Gloss thermofoilTFL Gloss Emeralddraw in the steam
    51X-ray closet · see behind the doors NEW
    X-ray · reach-in 96″See what's behind the doors

    hover to x-ray · drag a door to slide it

    52Garment rack · fling the rail NEW
    TFL Closet · walk-inDrag the rail1⅛″ chrome rods · 2 depths
    53Infinity closet · mirror tunnel NEW
    Facing mirror doors∞ reflections
    54Origami shirt · fold & shelve NEW
    Fold it like the storeDrag the left side in
    55Cedar block · moths turned away NEW
    Cedar vs moths0 turned away · 0 holesdrag the cedar block
    56Value magnet · pull the benefits NEW
    $0 of valuepulled toward your kitchen
    57Split-flap proof wall NEW
    TFL DOORDepartures · live from the shop floor

    58Before / after · jelly divider NEW
    Before · 1998 honey oakAfter · TFL Shaker Sage
    24 doors refaced · $912at $38/door · new cabinets run ~$18,000
    59Melting price · heat gun NEW
    Big-box quote · 24 shaker doorshold the heat gun over the price
    Same 24 doors · cut to size · ships in 7 days
    60Anyone, anywhere · order globe NEW
    Anyone, anywhere0 orders on the globe
    Waiting for the next order…homeowners · builders · designers · flippers