Wolf Creek Showcase
Make Open in /new

Modern CSS

Modern CSS, SVG, canvas, WebGL. Sixty demos. Also listed on Effects.

01CSS anchor positioning

Hover or focus a button

02@starting-style enter/exit

Swap build live?

Build 61ab28c passed verify-live.sh with zero diffs.
🔔 3 sites reported today

03Scroll-snap + ::scroll-marker
  • 🪵Oak
  • 🌊Coastal
  • 🪨Slate
  • 🌿Sage
  • 🍷Merlot
04text-wrap balance + gradient text

Every change ships through a build, and nothing gets edited live again

Pretty wrapping avoids a lone word at the end of a paragraph, which makes body copy like this read noticeably cleaner.

05@property animated mesh blobs
@property--x1 --y1 --c1 …
06SVG path morph + line draw
07WebGL dissolve → particles
hover / tap → particles
08Noise grain + animated mesh hero
BUSTERS FLOORING

Floors that feel like home.

09Container queries
🏡
Wolf Creek Cabinets

Custom kitchens, built in Alabama.

★ 4.9120 reviews
400px
10Infinite marquee ticker
Busters FlooringWolf CreekTFL DoorDrone DudeProfuctionsJoker Joinery
⚡ 47 builds🛡 0 leaks✓ 9 sites⏱ LCP 2.1s📦 61 og images🔁 builds only
WebGPUView Transitions@starting-styleAnchor positioningContainer queries@property
11CSS offset-path orbit

offset-path · offset-distance

12interpolate-size accordion
Builds only
Every change ships through a build. Live edits are treated as drift and get pulled back into source.
verify-live.sh
Diffs the live tree against the latest build artifact so nothing sneaks onto the server unnoticed.
Atomic swap
The new build goes live in one rename. Rollback is the previous artifact, one click away.
13clip-path morph card
14Named scroll-timeline scrub
scroll →
Oak
Coastal
Ember
Sage
15OKLCH relative color theme
210°
Theme follows the hue

Relative color syntax keeps tints, shades and a shifted accent in lockstep.

163D coverflow carousel
17Radial mask wipe reveal
BEFORE
AFTERBuilds only

move to wipe

18Canvas particle bloom

move · trails bloom

19@scope theme islands
Light island

Scoped rules paint this card only.

Dark island

Same selectors, different @scope.

20Difference-blend spotlight

Invert the light

mix-blend-mode difference turns the spotlight into a live negative.

21CSS masonry gallery NEW

columns masonry

22Interest invoker / popover preview NEW
🏡
Wolf Creek Cabin

Custom kitchen package · Alabama build · hover or click to preview.

interestfor · popover

23field-sizing content input NEW
24Style queries themed island NEW
Warm island

Style query reads --theme: warm.

Cool island

Same component, cool token.

25Animated SVG underline path NEW
Builds only
26Anchor popover stack NEW
Deploy

Ship the latest build artifact.

Verify

Diff live against the build.

Swap

Atomic rename goes live.

anchor + popover

27Scroll-driven counter NEW
↓ scroll
0builds
end
28View-transition card expand NEW
29Container query card swap NEW
🏡
Wolf Creek

Custom kitchens, built in Alabama.

★ 4.9 · 120 reviews
360px
30@property angle spinner NEW
@property --angconic-gradient spinner
31text-wrap pretty article NEW

Every change ships through a build

Pretty wrapping avoids orphans at the end of a paragraph, which makes body copy like this read noticeably cleaner across narrow cards.

32offset-path badge race NEW
⚡
🛡
✓

offset-path race

33interpolate-size FAQ NEW
What is builds only?
Every change ships through a build. Live edits are treated as drift and get pulled back into source.
How does verify-live work?
It diffs the live tree against the latest build artifact so nothing sneaks onto the server unnoticed.
Can we roll back?
Yes. The previous artifact is one rename away. Atomic swap keeps rollback instant.
34OKLCH theme dial NEW
250°
Theme follows the dial

oklch relative color keeps tint, shade, and accent locked.

35Masonry with span NEW
Hero A B Tall C D Wide

grid masonry · span

36Popover hint chain NEW
Step 1

Deploy the build.

Step 2

Verify live diffs.

Step 3

Atomic swap. Done.

popover chain

37Cross-fade routes fake NEW
Home

Builds only landing.

Work

Nine sites, zero drift.

Lab

Effects under test.

38Sticky stack cards NEW
01 · Drift

Live edits outside git.

02 · Reconcile

Pull back into source.

03 · Rebuild

Fresh artifact ships.

04 · Swap

Atomic rename live.

39SVG draw on view NEW
↓ scroll
end
40CSS timeline scrubber NEW
Oak
Coastal
Ember
Sage

scroll-timeline scrub

41Swatch morph · view transition NEW
View Transitions
42Scroll-built floor · install timeline NEW
Installed

0 / 240 sq ft · scroll ↓

animation-timeline
43Magnetic zellige tiles NEW
Zellige · Sage4×4 handmade · tap to re-glaze
443D rug unroll NEW

Kilim · Rust & Indigo5′ × 8′ · hand-knotted wool

45Epoxy pour · gooey gloss NEW
0% coatedpress & hold to pour
46Self-building kitchen · scroll install NEW

0/15 fronts · $0scroll inside ↓

animation-timeline: scroll()
47Soft-close hinge · Verlet door lab NEW
drag the door ←
top viewsoft zone 12°
Angle
0°
Speed
0°/s
Last close
—
48CNC door-style morph · view transition NEW
View Transitions
TFL Door · 3/4″ MDF · thermofoil

Shaker

$46 / door · ships in 7 days

2-1/4″ stiles · flat recessed panel · 35 mm cups bored

49Magnetic snap-to-spec pulls NEW
0/5 placeddrag hardware onto a front
50Edgebander · gooey glue line NEW
Glue 200°C
Pressure
Trim
Bond —hold Feed · or drag the panel ←
51Verlet cloth shirt · tug the hanger NEW
Oxford bluetug the shirt
slide the hanger
52Messy → organised closet scrubber NEW
Before0% floor clear
53Pull-down wardrobe lift · gas spring NEW
side view
Rod height
84″
Gas spring
20 lb
54Rainbow closet · sorting algorithm NEW
0 compares · 0 swaps
55Wardrobe focus pull · depth of field NEW
50 mm · f/1.4 · 3.4 mFull-length mirror · LED strip
0.6 m1.2 m2.1 m3.4 m
56Scroll-told pitch · reface story NEW
Chapter 1

Your kitchen isn’t the problem.

Solid boxes. Good layout. Tired 1998 oak.

Chapter 2

Your doors are.

Swap the faces, keep everything else.

Chapter 3

Same boxes. 97% less.

Full remodel $0
18 TFL doors × $38 $0
Chapter 4

Ships in 7 days.

MTWTFSS
Chapter 5

Cut. Banded. Bored.

35 mm hinge cups drilled at the factory. Screw on, done.

Your move

Get your door quote.

★★★★★ 12,400 kitchens refaced

animation-timeline: scroll()
57Doors-shipped odometer · live dock NEW
TFL doors shipped since 2009

14 doors → Knoxville, TN · Sage Shaker

18
demo data
58Sawdust particle logo · TFL reforms NEW

TFL Doorcabinet doors made to order

sweep · hold · release
59Objection busters · kinetic type NEW

60Gravity-drop testimonials NEW
0.0 ★ averagefrom 2,140 TFL installs
sample reviews · drag to throw