Back to Bay House
Design Studies

Glassmorphism Showcase

Four animation variations exploring frosted glass materials in the Bay House context. Pure CSS keyframes and vanilla JavaScript — no frameworks.

Variation 1

Chroma-Blur Title Reveal

Each character dissolves from blur to sharp at 40ms intervals. The Bay House headline emerges through a cinematic fog — filter: blur animated per character via CSS custom properties.

filter: blur() per-character stagger CSS --i index
View demo →
Variation 2

Cascading Property Details

Property specifications cascade in strict parent-child hierarchy. Solid dots pop with spring overshoot, sub-items trail 150ms behind, individual words stagger at 55ms intervals.

spring easing word-level stagger hierarchy animation
View demo →
Variation 3

Glass-Layer Typography

A frosted glass overlay slides away to reveal marketing copy beneath. The glass is an active participant — backdrop-filter blur lifts as text simultaneously de-blurs into focus.

glass slide dual de-blur editorial layout
View demo →
Variation 4

Tactile Press Sequence

A physical press-and-release metaphor. The panel loads in a depressed state, then springs back with overshoot easing. Text lines cascade upward, a ripple emanates, and a border glow pulses.

spring physics inset shadow interactive
View demo →
New · For Marianne

14 New Glass Card Ideas

Design enhancements we don't have yet — light shimmer, glowing borders, tinted edges, tactile press, and more. Browse the ideas and pick NEED, NICE, or SKIP for each one. Your choices get copied to send to Armando.

interactive decision tool 14 ideas copy to clipboard
Open the ideas page →

Shared Technical Foundation

Glass Material
backdrop-filter: blur(20px) saturate(180%)
Fill
rgba(255,255,255, 0.06–0.10)
Edge
1px solid rgba(255,255,255, 0.10–0.15)
GPU Rule
Only transform & opacity animated (composited layers)
Fonts
DM Serif Display + DM Sans (site fonts)
Dependencies
Zero. Pure CSS @keyframes + vanilla JS