Liquid Glass Motion System

Premium glassmorphic design with scroll-linked animations. Fully accessible with reduced motion support.

1. Glass Cards

Semi-transparent containers with backdrop blur and refraction highlights.

Basic Glass Card

Hover to see lift effect and glass glow. Notice the refraction highlight on the top edge.

With Delay

This card appears 100ms after the first. Uses delay-1 class.

3D Tilt (Desktop)

On desktop, move your mouse over this card to see 3D tilt effect.

                <div class="glass-card" data-animate="fade-in">
    <h3>Your Content</h3>
</div>
            

2. Enhanced Buttons

Buttons with lift animations and glass glow on hover.

Primary Button Secondary Button

                <a href="#" class="btn-primary">Primary Button</a>
<a href="#" class="btn-secondary">Secondary Button</a>
            

3. Parallax Scrolling

Background layer moves slower than foreground for depth effect.

Scroll to see parallax effect

                <div class="parallax-container">
    <div class="parallax-layer" data-parallax-speed="0.5">
        <!-- Background content -->
    </div>
    <div class="content">Foreground</div>
</div>
            

4. Glass Panels

Lighter glass variant for nested content.

Outer Glass Card

Inner Glass Panel

Lighter glass effect for hierarchy. Notice the reduced blur and opacity.

                <div class="glass-card">
    <div class="glass-panel">
        Nested content
    </div>
</div>
            

5. Feature Cards

Service feature tiles with glass effects.

SEO Services

Technical SEO, content optimization, and authority building.

+142% organic traffic
DR 38→52

PPC Management

Google Ads, Meta Ads, and TikTok campaigns.

-47% CPA
2.8x ROAS

Social Media

Content strategy, community management, and influencer partnerships.

+740% engagement
86K new followers

6. Staggered Animations

Elements appear in sequence with delay classes.

Appears first (no delay)

Appears second (100ms delay)

Appears third (200ms delay)

Appears fourth (300ms delay)

                <div class="glass-card" data-animate="fade-in">First</div>
<div class="glass-card delay-1" data-animate="fade-in">Second</div>
<div class="glass-card delay-2" data-animate="fade-in">Third</div>
            

7. Scroll Progress Bar

Look at the top of the page - the red bar tracks your scroll position.

The scroll progress bar is automatically added by liquid-glass.js. It uses transform: scaleX() for GPU-accelerated updates.

8. Accessibility Features

Reduced Motion Support

All animations respect prefers-reduced-motion. If you enable reduced motion in your OS settings, all animations will be disabled.

Focus Rings: Tab through interactive elements to see red focus outlines.

Tab to me Then to me

9. Performance Optimizations

What Makes It Fast

Passive scroll listeners (no blocking)
RequestAnimationFrame throttling (60fps)
IntersectionObserver (lazy trigger)
GPU-accelerated properties (transform, opacity, filter)
Early return for reduced motion preference

                // Open DevTools → Performance
// Record while scrolling
// Check for 60fps green bars
// No forced reflows in scroll handlers
            

Ready to Implement?

Check the implementation guide for full documentation and code examples.

View Documentation Back to Homepage