---
id: "aw-el-aeac2e84-6862-499f-90fc-1d8c59e9d0eb"
source: https://www.awwwards.com/inspiration/reveal-transition-oryzo-ai
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Cork Bark Crack Reveal Transition

## Summary
A scroll transition on a product site for a cork accessory: a full-screen macro of rugged cork bark splits along a horizontal crack, the halves part to reveal a glowing white word on near-black, the section flips to warm cream with a palm-leaf shadow, and the page continues into fact cards and a dark reviews section with a 3D cork coaster. Worth studying for a material-driven reveal where the product's own texture becomes the curtain.

## Style
- Theme: mixed (dark bark and espresso sections, cream feature section)
- Mood: earthy, tactile, premium, witty, warm
- Tags: scroll-transition, split-reveal, macro-texture, glow-text, webgl, product-site, sustainability
- Category: Motion, 3D

## Palette
| Role | Hex |
|---|---|
| Near black | #1A1714 |
| Espresso | #2D1F19 |
| Cream | #F6E5CF |
| Bark brown | #43281D |
| Bark olive | #504633 |
| Cork mid | #7A684F |
| Cork tan | #B49B7E |
| Moss card | #4B5A37 |

## Typography
- Big word: geometric-grotesk sans, bold (700), lowercase, tight tracking (-0.04em), spanning about 90% of the window width; white with a soft outer glow on dark, near black on cream. Closest free font: Inter Tight 700 or Plus Jakarta Sans 800.
- Eyebrow above it: small uppercase sans, medium, tracked +0.05em.
- Body: three short centred lines of small regular sans (about 1% of height). Inter 400.
- Card titles: uppercase condensed-ish sans bold, three lines, white on the green card and dark on cream cards; outlined huge numerals in the green card. Inter Tight 700.
- Nav: tiny uppercase links top right, placeholder wordmark top left.

## Layout
- 4:3 frame (1600x1200) with the site as a 16:9 window on a dark presentation ground lit by a copper radial glow behind it.
- Bark hero: full-bleed photoreal texture with a thin crack across the exact vertical middle; a small scroll cue at the bottom centre and a short vertical progress bar on the right edge.
- Word section: word centred with eyebrow above left and body below centre.
- Fact cards: three equal cards (green, cream, cream) with 8px gaps and square corners, 24px padding.
- Reviews: three columns (quote text left, 3D coaster centre, image tiles right) with thin 1px dividers.

## Elements
- Macro cork bark texture with deep crevices and warm highlights.
- Glowing lowercase headline with bloom.
- Palm-leaf shadow overlay on the cream background.
- Green card with outlined big number, cream card with a round green cork-texture icon, cream card with a ring of small dark pill labels.
- Dark reviews: star rows, quotes with one phrase highlighted in red-orange, a floating cork coaster render, and small photo tiles.

## Motion
- 0.3 to 1.8s: scrolling opens the crack; top and bottom halves move apart vertically (about 1.2s, ease-in-out) with light spilling from the gap.
- 1.8 to 3.2s: the halves leave the frame and the glowing word fades and scales from 1.1 to 1 behind them (about 600ms).
- 3.2 to 4.6s: the background wipes from espresso to cream and the word flips from white to near black; the palm shadow drifts slowly.
- 4.6 to 6.1s: fact cards slide up in a 100ms stagger (500ms each).
- 6.1 to 7.5s: transition into the dark reviews section; the coaster rotates slowly on its axis.

## Rebuild it
1. Use a sticky scroll scene: a `section` of `h-[300vh]` containing a `sticky top-0 h-screen` stage, and read progress with `useScroll({ target })`.
2. Crack: two stacked copies of the bark image, each clipped to one half with `clip-path: inset(0 0 50% 0)` and `inset(50% 0 0 0)`; map progress 0 to 0.35 into `y` of `-55vh` and `55vh` via `useTransform`.
3. Glow word: `text-white font-bold lowercase tracking-[-0.04em] text-[18vw] leading-none` with `text-shadow: 0 0 40px rgba(255,236,210,0.6)`; animate its `scale` 1.1 to 1 over progress 0.2 to 0.4.
4. Theme flip: transform progress 0.45 to 0.55 into background `#2D1F19` to `#F6E5CF` and text color white to `#1A1714`.
5. Fact cards: `grid grid-cols-3 gap-2` with `whileInView` stagger (y 40 to 0, 500ms).
6. Coaster: a React Three Fiber canvas with a cork-textured cylinder rotating at 0.2 rad per second.

## Generation prompt
A premium product website scroll transition: a full-screen macro photo of rugged brown cork bark cracks open horizontally, the halves part to reveal a giant glowing white lowercase word on a dark espresso background, which then flips to warm cream with soft palm leaf shadows, followed by fact cards in moss green and cream and a dark section with a floating cork coaster; earthy, tactile, premium, no real brand names.