---
id: "aw-el-882a03b6-d44c-456b-968c-5498690600d4"
source: https://www.awwwards.com/inspiration/intro-transition-oryzo-ai-1
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Cork Coaster 3D Product Intro

## Summary
A scroll-driven product intro for a humble cork coaster treated like a flagship gadget: the hero shows it on a green cutting mat with a huge rounded wordmark, then the scene falls away to dark brown, the 3D coaster floats centre stage and tilts while a two-line claim fades in, and finally a bold "Powered by AI" headline blurs in as a dark 3D hand rises to hold it up, ending in a hot magenta edge glow. A tongue-in-cheek, beautifully lit lesson in product storytelling with real-time 3D.

## Style
- Theme: dark (espresso brown after a warm photographic hero)
- Mood: witty, premium, cinematic, warm, bold
- Tags: product-intro, scroll-transition, real-time-3d, cork-texture, blur-in-type, edge-glow, satire, webgl
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Espresso black | #1A1615 |
| Dark roast | #2E1D19 |
| Brown glow | #48281F |
| Warm grey | #544E45 |
| Cork shadow | #8C4F2D |
| Cork light | #B58256 |
| Cream type | #F3D2CE |
| Magenta glow | #933A8D |

## Typography
- Hero wordmark: rounded geometric sans, bold, uppercase, cream, about 9% of frame height, top-left. Placeholder wordmark; Outfit Bold or Nunito Sans Black.
- Big headline ("Powered by AI"): neutral grotesk, medium weight, sentence case, cream, about 6% of frame height, centred, with a small superscript asterisk and a tiny orange model label under it. Inter Medium or Geist.
- Claim ("Isn't just a coaster."): grotesk semibold uppercase, two lines, about 3% of frame height, left of the product.
- Body ("Designed to lift, insulate and grip..."): grotesk regular 11px, sentence case, cream at 85%.
- Micro labels (nav items, "Scroll to continue", corner notes): 6 to 7px uppercase grotesk.

## Layout
- 4:3 presentation frame (1600x1200) with the site as a 16:10 viewport on a dark backdrop lit by a brown radial glow.
- Hero: full-bleed top-down photo of a cork coaster on a gridded green cutting mat with a pencil and craft knife; wordmark top-left, body copy right of the coaster, a frosted credit card bottom-left (about 18% wide, 4px radius).
- Dark scenes: product centred at about 30% of the viewport height; claim on the left third, small paragraph on the right third, perfectly mirrored.
- Header: tiny logo left, four nav labels right, a thin vertical progress bar on the far right edge (2px wide, cream).
- Final scene: a soft 40px inner glow around the viewport edges in magenta to pink.

## Elements
- Cork coaster: thick round disc with a raised lip and speckled cork texture, warm rim light, soft contact shadow.
- Cutting mat: green self-healing mat with a white grid and ruler numbers.
- Dark 3D hand: matte charcoal hand rising from the bottom edge, fingers cradling the coaster from below.
- Frosted credit card: translucent white box with a short credit line and a tiny tagline.
- Edge glow: vignette-shaped border glow in magenta with a hot pink upper-right corner.
- Scroll hint: a small circle icon with a "Scroll to continue" label at the bottom centre.

## Motion
- 0 to 1800ms: the photo hero fades to espresso while the coaster lifts off the mat into 3D, scaling from 30% to 45% of the viewport height.
- 1800 to 3200ms: the coaster tilts 35 degrees on X and turns about 20 degrees, showing its edge; the claim and paragraph sharpen from blur (about 500ms, ease-out).
- 3200 to 4600ms: the coaster flips back flat and moves down as "Powered by" blurs in word by word, the last word resolving last.
- 4600 to 6100ms: the dark hand rises from below (about 900ms, ease-out) and catches the coaster.
- 6100 to 7500ms: the magenta edge glow blooms in over 600ms; the scene settles.
- Everything is scrubbed by scroll, so speed follows the user.

## Rebuild it
1. React page with a tall scroll container and a `sticky top-0 h-screen` stage holding a React Three Fiber `<Canvas>` plus an HTML overlay layer.
2. Coaster: a lathe or cylinder mesh with a cork albedo and normal map, warm key light from top-left and a rim light; hand as a glTF with a dark rough material.
3. Drive everything from Motion `useScroll().scrollYProgress`: `useTransform` ranges for coaster rotation, position and scale, hand y, and overlay opacity.
4. Blur-in type: per-word `motion.span` with `filter` mapped from `blur(12px)` to `blur(0px)` and opacity 0 to 1 over staggered progress slices.
5. Hero photo: an `img` that crossfades to `bg-[#1A1615]` between progress 0 and 0.15.
6. Edge glow: an absolutely positioned overlay with `box-shadow: inset 0 0 80px 20px #E03FC8` faded in near progress 0.9.

## Generation prompt
A cinematic product intro for a simple cork coaster presented like a high-tech flagship: first a top-down photo on a green gridded cutting mat with a pencil and knife, then the coaster floats in 3D over a deep espresso-brown background, tilting to show its edge beside a bold two-line claim, then a large cream headline blurs in as a dark matte 3D hand rises to hold the coaster, finishing with a glowing magenta edge light; warm, witty and premium.