---
id: "aw-el-2f334ac2-42b6-47fe-af56-ed1b818bb43a"
source: https://www.awwwards.com/inspiration/webgl-sketches-interaction-oryzo-ai
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Neon Sketch Product Variant Picker

## Summary
A dark product section for a cork coaster: a huge cream placeholder wordmark sits over a cloud of glowing red hand-drawn sketches (rough product drawings, circles and scribbled notes), with a three-option pill selector beneath it. Choosing a variant swaps a realistic 3D cork piece from single to double to triple stack and updates the copy. Worth studying for the WebGL neon-sketch layer that makes a plain product feel like it came off a designer's notebook.

## Style
- Theme: dark (near-black with red neon and warm cream)
- Mood: playful, premium, energetic, crafted
- Tags: webgl, product-configurator, neon-sketch, segmented-control, 3d-product, glow, dark-ui
- Category: Features, 3D

## Palette
| Role | Hex |
|---|---|
| Background | #100705 |
| Outer frame | #1B1716 |
| Glow maroon | #361811 |
| Glow brown | #502317 |
| Cream type | #FBEBD4 |
| Cork | #8E5B3A |
| Sketch red | #9A1105 |
| Neon red highlight | #FF2A12 |

## Typography
- Wordmark: geometric sans, extra bold, uppercase, about 13 percent of the section height, cream, centred. Outfit (800) or Poppins (800).
- Eyebrow above it ("CHOOSE YOU OWN"): small uppercase sans, medium, cream. Inter (500).
- Variant name (left column): small uppercase sans, semibold. Inter (600).
- Body and feature bullets: tiny regular sans in cream at about 70 percent opacity. Inter (400).
- Pill labels: tiny uppercase sans; nav links tiny uppercase at the top right.
- Sketch notes: red handwritten scribbles (decorative, unreadable).

## Layout
- 4:3 frame (1600x1200) showing a 16:9 site viewport with a soft red glow bleeding onto the outer dark frame.
- Header: placeholder logo top-left, four tiny nav links top-right.
- Centre column: eyebrow, wordmark and a row of three pills (about 80 x 22px each, full radius, 8px gap) stacked at the top third.
- Lower third: a three-column split, variant name and description on the left (about 25 percent width), the cork product centred, three bulleted features with small circle icons on the right.
- A cream vertical scroll indicator bar sits at the far right edge.

## Elements
- Red sketch layer: thin glowing red strokes of coasters seen from different angles, circles, arrows and handwriting, scattered around the wordmark with a bloom glow.
- Wordmark: solid cream letters in front of the sketches.
- Variant pills: dark brown capsules with 1px borders; the active one has a cream outline and a tiny dot.
- 3D product: a cork disc with a raised rim, warm speckled texture, soft shadow; stacked versions show 2 or 3 discs.
- Feature list: three rows with outlined circle icons and short labels.
- Intro state: a single cork disc glowing behind the wordmark on a warm brown haze.

## Motion
- 0 to 1s: intro, the disc glows behind the wordmark, then the scene cuts to dark and the red sketches fade in with a bloom flicker (about 500ms).
- 1.8s onward: as the cursor moves, sketches near it brighten and redraw, as if traced by light (strokes animate along their length in about 600ms).
- 3.2s and 4.6s: hovering then clicking the second pill moves the active outline (about 250ms spring) and the cork model rises into a two-disc stack while the copy crossfades (about 400ms).
- 6.1s: the third pill adds a third disc that drops into place with a small bounce (about 500ms).
- The product slowly rotates a few degrees throughout.

## Rebuild it
1. Section: `relative h-dvh bg-[#100705] text-[#FBEBD4] overflow-hidden` with a radial gradient `radial-gradient(60% 50% at 50% 30%, #361811, transparent)`.
2. Sketch layer: a React Three Fiber canvas behind the content; draw the sketches as SVG paths converted to line geometry with an emissive red material and a bloom pass, or render inline SVG with `filter: drop-shadow(0 0 6px #FF2A12)`.
3. Cursor reveal: pass the pointer position as a uniform and raise stroke brightness within a 200px radius; animate `stroke-dashoffset` for a redraw effect.
4. Wordmark: `text-[13vh] font-extrabold uppercase leading-none` centred; pills in a `flex gap-2` with a shared `layoutId` outline that springs between options.
5. Product: a GLTF cork disc instanced 1 to 3 times; animate added discs from `y: 0.4` and `opacity: 0` to rest with a spring (stiffness 200, damping 14).
6. Copy columns: `AnimatePresence mode="wait"` crossfades (300ms) keyed by the selected variant.

## Generation prompt
A dark premium product web page with a huge cream geometric sans-serif wordmark centred over a swirl of glowing neon-red hand-drawn sketches of round cork coasters, arrows and scribbled notes, three small pill buttons below, and a realistic warm cork coaster that stacks into two and three layers as variants are chosen, subtle red bloom and haze, energetic and crafted, no real brand names.