Aetheris Voyage Collection

The Art of
Depth & Light

Where transparency reveals meaning.
Where layers create understanding.

Author·2026

The First Chapter

Setting the stage for what comes next

What You'll Discover

Transparency as a tool. How glassmorphism creates visual hierarchy without the visual weight of solid containers.
Depth through blur. The psychology of perceived elevation —why our brains trust layered interfaces.
Light as a guide. Using gradient orbs and ambient illumination to direct attention naturally.
Motion as meaning. Framer Motion reveals —each animation tells part of the narrative.
Two-tier elegance. Subtle vs. strong glass —knowing when to amplify and when to whisper.

The Liquid Glass System

/* Aetheris Voyage: Two-tier Liquid Glass */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  backdrop-filter: blur(4px);
}
.liquid-glass::before {
  /* gradient border mask */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    transparent 40%, transparent 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask-composite: xor;
}

.liquid-glass-strong {
  backdrop-filter: blur(50px);
  /* stronger inset shadow + higher alpha */

Production-grade CSS from the original prompt —works in all browsers

Subtle vs Strong Glass

Subtle Glass

blur(4px) backdrop
rgba(255,255,255,.01) fill
0.45/0.15 gradient alpha
Navigation / chips / cards
Everyday UI elements

Strong Glass

blur(50px) backdrop
rgba(255,255,255,.02) fill
0.50/0.20 gradient alpha
CTA buttons / hero panels
High-emphasis moments

Design Vocabulary

●

Gradient Orbs

Ambient light pools create depth without borders

■

BlurText

Words emerge from blur —cinematic entrance animation

◆

Pill Shapes

rounded-full everything —the softest possible container

Thank You

Stay inspired. Stay layered.

github.com/author@author_handle

The Art ofDepth & Light