Y3K Hyperfuture Drop
Holographic Y3K product drop page — Chakra Petch display / Lexend body / Share Tech Mono data — deep violet-black base with animated hue-rotating holographic overlays, chrome metallic gradient text, inset glow panels breathing between pink and cyan, floating blobitecture blob shapes, live countdown timer, 3D card tilt on hover, and theatrical SOLD OUT stamps at 12° rotation. Zero photography — all visuals are chrome SVG product shapes and CSS gradient art.
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/y3k-hyperfuture-drop and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
### CSS Custom Properties (from exhibit)
```css
:root {
--base: oklch(0.10 0.02 280); /* deep violet-black */
--base-2: oklch(0.13 0.025 275); /* elevated surface */
--base-3: oklch(0.16 0.03 270); /* highest surface */
--chrome-1: oklch(0.75 0.01 250); /* silver-purple */
--chrome-2: oklch(0.95 0.01 80); /* near-white gold */
--chrome-3: oklch(0.65 0.01 200); /* steel blue-grey */
--glow-pink: oklch(0.70 0.25 340); /* hot neon pink */
--glow-cyan: oklch(0.75 0.20 195); /* electric cyan */
--text: oklch(0.90 0.01 280); /* lavender-white */
--text-dim: oklch(0.60 0.01 280); /* muted lavender */
}
```
### Chrome Gradient Formula
Used for text clips, SVG fills, and accent elements:
```css
linear-gradient(135deg,
oklch(0.72 0.01 250), /* silver-blue */
oklch(0.98 0.00 80), /* near white */
oklch(0.85 0.01 200), /* steel blue */
oklch(0.92 0.02 40), /* warm silver */
oklch(0.78 0.01 260) /* cool silver */
)
```
- background-size: 400% auto
- animation: chromaPulse 6s ease infinite
### Holographic Gradient (hue-rotate input)
```css
linear-gradient(135deg,
oklch(0.65 0.22 30 / 0.5),
oklch(0.65 0.22 100 / 0.4),
oklch(0.65 0.22 180 / 0.5),
oklch(0.65 0.22 260 / 0.4),
oklch(0.65 0.22 320 / 0.5)
)
/* then: animation: hueRotate 6s linear infinite on filter */
```
---Agent instructions (SKILL.md)(advanced)
Design Skill
### Core Principle **Chrome eats everything.** This is the visual language of a future that never arrived — metallic, iridescent, liquid. Every surface reflects. Every gradient shifts hue. The interface looks like it was forged in molten chrome and projected onto a holographic screen. Restraint is a concept from the past. ### Visual Vibe **Emotional Keywords**: Iridescent, Chrome, Liquid-Metal, Holographic, Y3K, Hyperfuture, Maximal, Molten, Prismatic, Drop-Culture Real-world references: MSCHF drop pages, Nike SNKRS countdown UX, Charli XCX "Crash" art direction, StockX Grail Alert screens. ### What This Design Is NOT - Not cyberpunk — no green terminals, no Matrix rain - Not synthwave — no sunset gradients, no palm trees, no receding grids - Not corporate futurism — no blue-tinted confidence gradients - Not dark mode minimalism — this is MAXIMAL; every surface does something active - Not vaporwave — no Roman busts, no pink-and-teal nostalgia - Not subtle — if the result can be described as "clean," it failed ### The DNA 1. **Hue-rotating holographic gradients** — full spectrum cycling on 5–8s loops is the primary visual material 2. **Chrome text** — metallic gradient clipped to letterforms; type is a reflective physical object 3. **Inset glow panels** — colored light from inside containers, never shadow beneath them 4. **Blobitecture shapes** — organic CSS blobs with asymmetric border-radius, metallic fills, desynchronized float animation 5. **Scarcity as design material** — edition counters, countdown timers, SOLD OUT stamps are first-class design elements
