Hub

Iridescent
Dreamscape

Create a dreamy, sensory UI by blending flowing mesh gradients with holographic colors. Ideal for high-end applications and creative showcases.

Prism Elements

Refraction

Light splits through layered glass surfaces, casting iridescent color fragments across the interface

Diffusion

Soft radial blur dissolves hard edges into luminous halos that breathe with ambient motion

Reflection

Mirrored glass surfaces multiply depth, creating infinite corridors of shimmering holographic light

Holographic Properties
Blur 80px
Opacity 0.6
Rotation 15deg
Scale 1.2x
Color Tokens
Pink Orb #ff7eb3
Coral Orb #ff758c
Blue Orb #4facfe
Cyan Orb #00f2fe

AI Request Prompt

Design a landing page in Holographic Fluid style — dreamlike iridescent gradients on a deep dark canvas.

COLOR TOKENS:
--c1: #ff7eb3 (pink orb)
--c2: #ff758c (coral orb)
--c3: #4facfe (blue orb)
--c4: #00f2fe (cyan orb)
--text: #ffffff
--bg: #0b0f19
--pre-text: #e2e8f0
--hero-bg: rgba(255, 255, 255, 0.03)
--hero-border: rgba(255, 255, 255, 0.1)
--card-gradient: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02))
No other colors.

TYPOGRAPHY:
Heading: Outfit 700, tracking -0.03em
Body: Outfit 300
Scale: 0.9rem / 1.2rem / clamp(3rem, 7vw, 6rem)
Heading line-height: 1.1
Body line-height: 1.6
Title text effect: linear-gradient(to right, #fff, rgba(255,255,255,0.5)) with background-clip text

UI:
- Hero panel: border-radius 40px, 1px solid rgba(255,255,255,0.1), backdrop-filter blur(40px), box-shadow 0 30px 60px rgba(0,0,0,0.3) + inset 0 1px 0 rgba(255,255,255,0.2)
- Cards: border-radius 24px, 1px solid rgba(255,255,255,0.1), card-gradient background
- Card hover: translateY(-5px), box-shadow 0 20px 40px rgba(0,0,0,0.2), border-color rgba(255,255,255,0.3)
- Prompt box: border-radius 24px, rgba(0,0,0,0.4) background, 1px solid rgba(255,255,255,0.05)
- Copy button: #fff background, #000 text, border-radius 20px, padding 10px 20px

LAYOUT:
Container: width min(1080px, 92vw), margin 0 auto, padding 30px 0 78px
Hero: padding 60px
Cards grid: display grid, grid-template-columns repeat(auto-fit, minmax(240px, 1fr)), gap 20px
Card: padding 24px
Lead paragraph: max-width 600px, font-weight 300, margin-bottom 40px

MOTION:
Background orbs: 3 radial-gradients (at 10% 20%, 80% 80%, 50% 50%), filter blur(80px), opacity 0.6
@keyframes fluid — 0% scale(1) rotate(0deg), 50% scale(1.2) rotate(15deg), 100% scale(0.9) rotate(-10deg)
Duration: 15s infinite alternate ease-in-out
Hero entrance: @keyframes fadeIn — from opacity 0 translateY(20px) to opacity 1 translateY(0), 1s ease-out
Card hover transition: transform 0.3s, box-shadow 0.3s
Copy button hover: scale(1.05), box-shadow 0 0 20px rgba(255,255,255,0.4)

RESPONSIVE:
- Mobile: hero padding reduced to 30px, cards collapse to single column (minmax handles naturally)
- Desktop: max-width 1080px, auto-fit grid preserves multi-column cards

FORBIDDEN:
- Light or white page backgrounds
- Flat opaque cards without glass/blur effect
- Static backgrounds — orbs must continuously animate
- Sharp corners on hero or cards (minimum 24px radius)
- Solid color borders without rgba transparency

OUTPUT:
1) Full color token list including orb gradients and glass panel specs
2) Hero / Feature Cards / Prompt section structure
3) Single-file HTML/CSS with fluid orb animation and fadeIn keyframes