Screen 01
Caption — what this screen does, in one line.
Project title
One paragraph that frames the project: what was the brief, what shape did the work take, what changed because of it. Replace this copy when filling the template in. Below: primary, secondary, and tertiary calls-to-action — point them at a live demo, a deeper case study, and the brand site.
02 · Mosaic, with parallax
A whole product surface, in one glance.
Nine screens stacked in a soft three-column mosaic. Each tile drifts at its own speed as you scroll, so the page feels alive without leaving the page.
01 · Scroll-snap rail
A guided tour, one screen at a time.
Screen 02
Caption — the second beat of the flow.
Screen 03
Caption — the third moment worth slowing down on.
Screen 04
Caption — a key state, ideally the one users miss.
Screen 05
Caption — the close. What the user feels at the end.
04 · Marquee tape
Every surface, drifting past.
07 · Annotated hero
One screen, slowed down.
When a single decision matters more than a flow, the page slows down with it. Up to five pins, each with a one-line label.
11 · Wallet stack
One product, four faces.
Four CSS-only card variants. Tap the stack to fan it open. Useful for card programs, multi-tier products, or any "same product, different finish" story.
03 · Sticky-pin cross-fade
A phone that holds while the story moves.
-
Step 01
First narrative beat.
A paragraph of placeholder copy describing the first state. Three or four sentences works best — enough to give the phone something to hold against, not enough to crowd it.
-
Step 02
Second beat — the turn.
The middle moment. Show a decision, a transition, or the part of the flow most users misread. Pair with a screen that shows the change clearly.
-
Step 03
Third beat — the payoff.
What the user gets. The frame should feel like resolution; the copy should name the moment plainly without overselling it.
-
Step 04
Fourth beat — the close.
An optional fourth step for flows with a quiet, confirming ending. Keep symmetric with the screens — four steps, four images.
06 · Fanning stack
Stack five screens. Tap to spread.
05 · Ticker columns
A wall of product, never still.
08 · Scroll-jack horizontal
Scroll down. Phones move sideways.
01 — Step
Short label
02 — Step
Short label
03 — Step
Short label
04 — Step
Short label
05 — Step
Short label
06 — Step
Short label
09 · Floating PiP
A phone that travels with the story.
Use this block when a section needs three or four paragraphs of long-form copy alongside a quiet visual companion. The phone stays glued to the lower-right corner — close enough to see, never close enough to crowd the words.
Inside the phone is a four-frame stepper that loops in the background. Swap the frames for screens that match each paragraph; the autoplay is deferred until the section enters view, so the phone is still on its first frame when the reader arrives.
Reach for this when the work is about the words as much as the screens — a design rationale, a behind-the-scenes process note, or a long quote from the team. The pattern is borrowed from the long-read journalism we keep coming back to.
10 · Spread on hover
Five screens that scatter when you reach for them.
12 · Before / after
Two states, one frame.
Drag the divider to compare. Use for rebrands, dark/light modes, screen redesigns — anywhere a single before/after frame is more eloquent than two stacked images.
00x
Headline metric — replace with a number that matters
0.0/5
Secondary metric — rating, score, or qualitative measure
00%
Tertiary metric — lift, retention, or growth percentage
Current NFT Rewards
Eight-week sprint making on-chain rewards feel like a familiar earn-and-spend rhythm.
Current
Brand identity and digital direction for Current's modern reintroduction.
