---
id: "aw-el-36e5a529-0c5b-4f4d-aa83-73d5fc4bc590"
source: https://www.awwwards.com/inspiration/intro-interaction-oryzo-ai
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Desk Flat-Lay Hero to Neon-Edged 3D Hand

## Summary
The opening of a tongue-in-cheek product site for a cork coaster: a top-down desk scene with a green cutting mat, pencil, utility knife and the coaster dead centre under a huge rounded wordmark, then a dark section where a 3D hand holds the coaster up beneath a big cream heading while the viewport edge glows in shifting neon magenta, pink and cyan. Worth studying for the contrast between a warm photoreal flat-lay and a moody, glowing 3D scene.

## Style
- Theme: mixed (warm desk photo, then dark glowing scene)
- Mood: witty, premium, warm, playful, cinematic
- Tags: product-hero, flat-lay, 3d-hand, neon-edge-glow, webgl, rounded-type, frosted-card
- Category: Hero, 3D

## Palette
| Role | Hex |
|---|---|
| Dark wine | #2A1C1C |
| Near black | #191616 |
| Oxblood | #432521 |
| Cutting mat green | #48533E |
| Walnut desk | #83634A |
| Cork | #B6805C |
| Cream type | #F5E3D1 |
| Neon magenta | #F23FD0 |

## Typography
- Wordmark: heavy rounded geometric sans, extra bold (800), uppercase, cream, about 9% of window height, top left (shown as a placeholder wordmark). Closest free font: Nunito 900 or Fredoka 700.
- Section heading: geometric sans, medium (500), title case, cream, about 6% of height, centred, with a small superscript asterisk. Closest free font: Plus Jakarta Sans 500 or Manrope 500.
- Product code under the heading: tiny uppercase sans in orange (#E8742F).
- Body and captions: small regular sans, white or cream (Inter 400); small uppercase labels tracked +0.05em.

## Layout
- 4:3 frame (1600x1200) with the site as a 16:9 window on a dark presentation ground with a copper radial glow.
- Hero: full-bleed top-down photo; wordmark top left with a one-line tagline above it; coaster at centre left; paragraph at centre right (about 25% wide); a frosted glass credit card at bottom left (about 18% wide, radius 4px, backdrop blur); a tiny video badge bottom right; a vertical tab on the right edge.
- Dark section: heading centred at the top, the 3D hand and coaster centred below, a short three-line uppercase caption to the right, a hand icon with a hint at the left; the window edge carries an inner neon glow about 20px deep.

## Elements
- Green self-healing cutting mat with a white grid and ruler marks.
- Cork coaster with a raised rim, photographed from above.
- Props: pencil, utility knife with orange handle, paper clip.
- Frosted credit card with uppercase text and a small fine-print line.
- 3D hand (dark, glossy, rim-lit) gripping the coaster vertically.
- Neon edge glow: magenta to pink to cyan gradient hugging the viewport border.

## Motion
- 0.3 to 3.2s: hero holds; the cursor moves over the scene with subtle parallax on props (about 6px).
- 3.2 to 4.6s: scroll transition into the dark section; the hand and coaster rise into frame (about 800ms, ease-out).
- 4.6 to 7.5s: the edge glow cycles hue, magenta on the left and cyan on the right, then pink and red, then cyan at the bottom (about a 3s loop, linear); the hand sways a few degrees following the pointer (damped).
- Heading stays fixed; small caption lines fade in with a 60ms stagger.

## Rebuild it
1. Hero: a full-bleed image with absolutely positioned overlays; wordmark `font-black uppercase text-[9vw] text-[#F5E3D1] leading-none`.
2. Frosted card: `backdrop-blur-md bg-white/15 border border-white/20 p-3 text-[10px] uppercase`.
3. Dark section: React Three Fiber canvas with a rigged hand GLB and a coaster mesh; `useFrame` lerps hand rotation toward pointer (factor 0.05).
4. Edge glow: an overlay `div` with `pointer-events-none` and `box-shadow: inset 0 0 40px 8px var(--glow)`; animate `--glow` through `#F23FD0`, `#FF4D6D` and `#38E1FF` with a Motion keyframe loop (3s, linear, infinite) or use a conic-gradient border mask.
5. Transition: `useScroll` on a tall wrapper; map progress to hand `y` (from 30vh to 0) and canvas opacity.
6. Heading and caption: `whileInView` fade with 60ms stagger.

## Generation prompt
A playful premium product website hero: a top-down photo of a wooden desk with a green cutting mat, a pencil, a utility knife and a cork coaster in the center, a huge rounded cream wordmark top left and a frosted glass caption card; then a dark moody scene where a glossy 3D hand holds up the cork coaster under a big cream heading, the screen edges glowing with neon magenta, pink and cyan light; witty, cinematic, no real brand names.