Wolf Creek Showcase
Make Open in /new

Page Transitions

Route and document-level motion. Sixty demos. Also listed on Effects.

01View Transition morph

Pick a card

02Skeleton to content
Inbox
📬Quote requestNew door order from Pell City
📈Weekly reportTraffic is up 18% on mobile
✅Deploy finishedBuild 61ab28c is live
03Reading progress reveal

Scroll-linked, zero JS

Progress comes from the scroll position itself, not from events.

One

Animations run on the compositor, so they stay smooth while the main thread is busy.

Two

animation-range chooses when each section starts and finishes.

Three

The timeline is the scroller, so there is no scroll listener to throttle.

Four

With reduced motion the sections simply stay visible.

Five

That is the whole trick. Keep scrolling to fill the bar.

04Route top progress bar
/home

Home

Pick another route to see the bar run.

05Page flip curl

Page two

The page underneath was always there. The flip just uncovers it.

Page one

A leaf rotates on rotateY with its transform-origin on the left edge.

06Staggered entrance
Today
🧱Cut list approved
🛠CNC program loaded
📦Order 4821 packed
🚚Pickup at 3:30 PM
🧾Invoice sent
07Page shatter exit

Goodbye, page

Every shard is a live clone of this card, clipped to one cell of the grid.

v1.0
08Parallax scroll depth

DEPTH

Sky, far ridge, near ridge, title. Each layer has its own speed.

The layers are plain divs with CSS gradients and clip-path.

No scroll listener runs in browsers with animation-timeline.

Keep going. The hero is leaving at full speed while the sky barely moves.

09Blur-up image reveal
Gallery
Generated artwork one
Generated artwork two
Generated artwork three
10Popover toast stack

Fire a few toasts. They appear at the bottom right of your screen.

11Soft page peel NEW

Chapter A

Grab the dog-ear and peel the page, or tap Peel.

12Magazine tri-fold NEW
01Cover
02Spread

Three panels fold like a magazine gatefold.

03Back
13Chapter snap scroller NEW

I · Arrival

Snap between chapters. The rail tracks the active one.

II · Work

Each section is a scroll-snap stop with its own tone.

III · Night

Keyboard arrows also move the scroller.

IV · Home

End of the run. Scroll back up anytime.

14Split-screen compare wipe NEW
BeforeOak
AfterWalnut
15Modal-as-route VT NEW

Open as a route

16Curtain rise NEW

Opening night

Curtains rise to reveal the page.

17Blinds wipe NEW

Sunroom

Venetian blinds wipe open across the view.

18Book open NEW
WCDField Notes

Left

Cover swings open on a hinge.

Right

The spread waits underneath.

19Zoom blur enter NEW

Focus in

Page enters from a deep blur zoom.

20Slide stack NEW
01Brief
02Build
03Ship
04Review
21Coverflow pages NEW

Page C

22Accordion chapters NEW
I · Arrival

Chapter bodies expand like an accordion.

II · Work

Only one chapter stays open at a time.

III · Night

Keyboard users get native disclosure.

23Map pin story NEW

Wolf Creek

Studio

24Before/after slider page NEW
DraftWire
LivePolish
25Typed manifesto NEW

    
  


      
    


    

      
26Sticky footnotes NEW

      

  
    

      
Ship readable pages first.1

      
Motion is a courtesy, not a stunt.2

      
Keep the chrome quiet so content can speak.3

      
Scroll to pin footnotes.

    

    
  


      
    


    

      
27Fullpage wheel sections NEW

      

  
    

      
One
Wheel snaps one section at a time.

      
Two
Each pane fills the stage.

      
Three
Arrow keys work too.

    

    
  


      
    


    

      
28Comic panel nav NEW

      

  
    

      
      
      
      
    

    
Panel 1 · Setup

  


      
    


    

      
29Polaroid scatter gather NEW

      

  
    

      
01

      
02

      
03

      
04

    

    
  


      
    


    

      
30Magazine scrolljack lite NEW

      

  
    

      
Spread A
Scrolljack-lite paces the story without trapping focus.

      
Spread B
Sections hold briefly, then release.

      
Spread C
Reduced motion disables the hold.

    

  


      
    


    

      
31Split text reveal NEW

      

  
    
SPLIT

    
  


      
    


    

      
32Ink page turn NEW

      

  
    
Ink A
An ink blot expands to turn the page.

    
    
    
  


      
    


    

      
33Glass route swap NEW

      

  
    
    
Home
Frosted glass swaps the route content.

  


      
    


    

      
34Skeleton orchestra NEW

      

  
    
Orchestra

    

    

    

    
🎻StringsReady

    
🎺BrassReady

    
🥁PercussionReady

  


      
    


    

      
35Toast journey NEW

      

  
    
Toasts travel across waypoints.

    
    
    

  


      
    


    

      
36Modal gallery VT NEW

      

  
    

      
      
      
      
    

    
  


      
    


    

      
37Longform progress chapters NEW

      

  
    

    

      
Ch 1
Progress fills as chapters are read.

      
Ch 2
Each block advances the bar.

      
Ch 3
End of the essay.

    

  


      
    


    

      
38Swipe stories NEW

      

  
    

      

      
Story 1
Tap edges or swipe.

      
Story 2
Progress ticks per beat.

      
Story 3
Last frame loops.

      
      
    

  


      
    


    

      
39Parallax layers deep NEW

      

  
    

      

        

        

        

        
DEEP

      

      
Four layers drift at different rates.
Keep scrolling to feel the depth.
No scroll listener when scroll-driven animations work.

    

  


      
    


    

      
40Ending credits scroll NEW

      

  
    

      

        
Design
Wolf Creek

        
Motion
Showcase Lab

        
Type
System UI

        
Thanks
You

      

    

    
  


      
    


    

      
41Plank sweep page transition NEW

      

  
  

    

      
Buster's Flooring

      
Floors, laid right.

      
Every page change here is installed board by board.

      
1,200+floors48hacclimate25yrwarranty

    

    

      
Hardwood · 5″ wide

      
Prairie White Oak

      

      
Wire-brushed, matte finish. $6.29/sq ft

    

    

      
Showroom

      
Come walk on it.

      
  • Mon–Fri8 – 6
  • Saturday9 – 3
  • SamplesFree, 5 max

    

  

  
  

    
    
    
  



      
    


    

      
42Tile flip section reveal NEW

      

  

    
Tile showroom

    
Scroll. Each section gets tiled in as it arrives.
Tap any tile to sound-check it.↓

    
Subway · 3×6 glossyHalf-bond, sage glaze · $4.10/sq ft

    
Hex mosaic · 1″Rosette pattern, matte porcelain · $11.80/sq ft

    
Calacatta · 24×48Bookmatched veins run tile to tile · $9.95/sq ft

    
That's the whole showroom ✓

  



      
    


    

      
43Plank-by-plank loader NEW

      

  
  

    
0%

    
Opening boxes…0 of 240 sq ft

  

  

    

      
      
      
    

    
  



      
    


    

      
44Molding header that shrinks to baseboard NEW

      

  

    
    
Buster'sFlooring & Trim

    
  

  

    
Scroll — the header mills itself down from crown to quarter round.

    
    
      
  • Stair noseOverlap · 78″ · matches 30 colors
    $34
    • 
      
  • T-moldingHardwood ↔ tile at doorways
    $29
    • 
      
  • ReducerStep down to vinyl or carpet
    $27
    • 
      
  • Baseboard 5¼″Primed MDF · 16 ft lengths
    $1.89/ft
    • 
      
  • Quarter roundHides the expansion gap
    $0.79/ft
    • 
      
  • ThresholdExterior doors · aluminum core
    $41
    • 
    

    
Tap the profile tag to change the finish.

  



      
    


    

      
45Sander cursor with sawdust trail NEW

      

  
  
  
Sanded 0%80 grit

  
Drag the sander across the old finish

  
Refinished ✓ 3 coats · satin poly · move to see the sheen

  

    
    
    
  



      
    


  

    

      
46Soft-close cabinet door page transition NEW

      

  
  

    

      
TFL Door · Shaker 5-piece

      
Cabinet doors, cut to the 1/16″.

      
Laminate & thermofoil. 35 mm hinge cups bored free.

      
$38per door7 daysto ship0chipped edges

    

    

      
Colors & woodgrains

      
Tap a finish. Watch the doors.

      

        
        
        
        
      

    

    

      
Your order

      
22 doors, ready to hang.

      
  • 22 doors × $38$836
  • Hinge boring · 44 cupsFree
  • Shipsin 7 days

    

  

  
  
  


      
    


    

      
47Drawer pull page slide NEW

      

  
  
  
  
  
  
  
  
  
  
  


      
    


    

      
48Hot-press thermofoil loader NEW

      

  
  
Pressed ✓Gloss White · 0 bubbles

  

    
0%

    
Waiting for a door blank…
      Heat 70°FVacuum 0 inHg
    

  

  

    

      
      
      
    

    
  



      
    


    

      
49Crown-moulding header with raking light NEW

      

  

    
    
TFL DoorCrown · light rail · scribe

    Scroll ↓ to install the crown
  

  

    
    

      
      
      
    

    
    
      
  • Ogee crown 4¼″Wrapped to match your doors$12/ft
    • 
      
  • Cove crown 3½″Clean shaker kitchens$9/ft
    • 
      
  • Light rail 1¾″Hides under-cabinet LEDs$6/ft
    • 
      
  • Scribe moulding8 ft · flexes to wavy walls$14
    • 
      
  • Outside corner blockNo miter? No problem$7
    • 
    

    
Move your pointer across the crown to rake the light.

  



      
    


    

      
50Screwdriver cursor that hangs the door NEW

      

  
Screws 0/4Stripped 0

  

    

      
      
      
      
      
      TFL · 15×30 · cups bored 22.5 mm in
    

    
Hung ✓4 screws · 0 stripped

  

  
Hold the driver on a screw. Let go at the click.

  
  


      
    


    

      
51Curtain closet page transition NEW

      

  
  

    
TFL Closet · Reach-in
No door swing. No track.
A curtain closet fits where bifolds bang into the bed.

    
Walk-in
8 ft of rod, two panels.
Ceiling track optional. Pull-down rod for the top row.

    
Curtain closet kit
$129, ships in 7 days.
  • Brass rod + 20 rings✓
  • 2 panels, 84″ drop✓
  • Install time20 min

    
  

  

    
    
    
    drag an edge
  



      
    


    

      
52Hanger cursor that hangs closet sections NEW

      

  
Your closet · 96″ rod0/96″ · $0

  
  
Hook a section, hang it on the rod

  
  
  
  
  


      
    


    

      
53Garment-bag zipper loader NEW

      

  
  
TFL Closet · plan #2214
Your walk-in is ready.
  • 8 ft double hang + shelf tower$1,284
  • Pull-down rod · shoe wallincluded
  • Shipsin 7 days

  

    
0%

    Measuring rod heights…
    
  



      
    


    

      
54Shelf-stack scroll progress NEW

      

  

    0/7 shelves
    

  

  

    
01
Measure the wall
Width, height, and where the outlet is. Tape gets you 90% of the way.

    
02
Pick a tower
14″ or 16″ deep, 84″ tall, white or Gray Oak laminate.

    
03
Adjustable shelves
Drilled on 32 mm centers so every shelf moves in seconds.

    
04
Shoe cubbies
Slanted fences hold 24 pairs where you can see them.

    
05
Bins & baskets
Linen bins slide right in. Hats, scarves, the stuff with no home.

    
06
Denim shelf
Deep shelf, tight spacing. Jeans stay folded, not avalanched.

    
07
Order it
Cut to the 1/16″, labeled by shelf. Ships in 7 days.

    
Tower full ✓

  



      
    


    

      
55Pivot mirror page flip NEW

      

  
  

    

      

      

      
    

    
  

  

    
    
    
  

  


      
    


    

      
56Red-carpet reveal transition NEW

      

  
  

    
Your TFL Door quote

    
32 doors · Gray Oak Shaker

    
  • 32 doors × $38$1,216
  • 64 hinge cups boredFree
  • Shipsin 7 days

    
  

  


      
    


    

      
57Exit-intent offer on swinging chains NEW

      

  

    
TFL DoorDoorsColorsCart (20)

    
Shaker · Gray Oak

    
Cabinet doors from $38.

    
    
20 doors in your cart · $760 · ships in 7 days

    
Move your pointer up and out of this box ↑

  

  
  
  
  


      
    


    

      
58Sticky CTA that grows with intent NEW

      

  

    
TFL Door
New kitchen doors without a new kitchen.
Keep your boxes. Swap the fronts. Laminate and thermofoil, cut to the 1/16″.

    
How it works
  1. Measure your openings
  2. Pick a door & finish
  3. Hang them. Hinge cups pre-bored.

    
Pricing
  • Shaker 5-piece$38
  • Slab, edge-banded$29
  • Drawer fronts$24
  • End panels$62

    
Reviews
“Saved $4,100 versus new cabinets. Nobody believes they're not custom.” Dana R., Austin
“Ordered Monday, hung them the next Tuesday.” Mike T., builder

    
The guarantee
If an edge chips or peels in 5 years, we recut the door. Free. No photos of your receipt, no forms.

    
That's everything.
22 doors in your plan. Let's cut them.

  

  
  


      
    


    

      
59Trust-badge minting loader NEW

      

  
  
  
Warming up the press…0/5

  



      
    


    

      
60Split-flap testimonial header NEW

      

  

    
    
4.9★ 2,318 reviewsheld

  

  

    
TFL Door · laminate & thermofoil

    
Doors your neighbors will ask about.

    
From $38 a door. Cut to the 1/16″, hinge cups bored, ships in 7 days.

    
No-chip guarantee · 5 yrs