Premium

Atmosphere effects — grain, glass, magnetic cursor, hero sequences, scroll-scrubbed video. The qualitative texture that separates a premium site from a well-styled one.

Premium Premium effects handle atmosphere — the qualitative texture that separates a premium website from a well-styled one. Film grain, glassmorphism, magnetic cursor buttons, orchestrated hero sequences, and scroll-scrubbed video all live here. Premium builds on both Lightweight and GSAP.

Files to load

<!-- 1–5. All Lightweight + GSAP files (see those pages) -->
...

<!-- 6. Premium CSS — grain, glass, video bg, advanced typography, magnetic cursor styles -->
<link rel="stylesheet" href="css/premium-effects.css">

<!-- 7. Premium scroll orchestration — GSAP glue for hero sequences, morphs, counters, scrubs -->
<script src="js/premium-scroll.js"></script>

premium-scroll.js expects GSAP and ScrollTrigger to already be loaded. Load order matters.

Atmosphere effects

See Overlays for the full grain and glass reference.

Grain overlays

.grain-overlay

.grain-overlay.grain-overlay--heavy

.grain-overlay.grain-overlay--light

<!-- Standard grain (4% opacity) -->
<section class="grain-overlay">Content</section>

<!-- Heavy grain for dark sections (8%) -->
<section class="grain-overlay grain-overlay--heavy">Dark content</section>

<!-- Animated grain for hero sections -->
<section class="grain-overlay grain-overlay--animated">Hero</section>

Glassmorphism

.glass

Frosted glass effect with backdrop-filter

.glass--light

Frosted glass effect with backdrop-filter

.glass--dark

Frosted glass effect with backdrop-filter

<div class="glass">Default frosted glass</div>
<div class="glass--light">Light glass (70% white bg)</div>
<div class="glass--dark">Dark glass (40% black bg)</div>
<div class="glass-card">Card with 16px blur + border-radius</div>

Hero entrance sequence

Orchestrated page-load animation. Elements stagger in order: badge, headline, body, CTA, media. Driven by premium-scroll.js — call BrikPremium.init() after the DOM loads.

<section data-premium-hero data-hero-delay="0.3">
  <span data-hero-badge>New Patient Special</span>
  <h1 data-hero-headline>Your smile starts here</h1>
  <p data-hero-body>Modern care in a comfortable setting</p>
  <div data-hero-cta>
    <a href="#" class="magnetic" data-premium-magnetic>Book Now</a>
  </div>
  <div data-hero-media class="image-reveal">
    <img src="hero.webp" alt="...">
  </div>
</section>

<script>BrikPremium.init();</script>

Background color morph

Sections that transition background and text color as you scroll through them. Combines well with grain-overlay.

<section data-premium-morph class="morph-light-to-dark grain-overlay">
  <h2>Our approach</h2>
  <p>Text color adapts as you scroll...</p>
</section>

Counter animation

Numbers count up when scrolled into view.

<div class="stat-group">
  <div class="stat-item">
    <span class="stat-number" data-premium-counter="500" data-counter-suffix="+">0</span>
    <span class="stat-label">Happy Clients</span>
  </div>
  <div class="stat-item">
    <span class="stat-number" data-premium-counter="98" data-counter-suffix="%">0</span>
    <span class="stat-label">Satisfaction</span>
  </div>
</div>

Magnetic cursor buttons

Buttons that attract the cursor, creating a tactile feel. The data-premium-magnetic attribute registers the element with the magnetic cursor handler in premium-scroll.js.

<a href="/book" class="magnetic" data-premium-magnetic>Book Now</a>
<button class="magnetic" data-premium-magnetic>Get Started</button>

Strength is configurable via a data-magnetic-strength attribute (default 0.4; range 0.1–0.8).

Scroll-scrubbed video

Video playback tied to scroll position — the user's scroll controls the video frame.

<div data-premium-video-scrub data-scrub-pin="true" data-scrub-distance="300vh">
  <video muted playsinline preload="auto">
    <source src="product-reveal.mp4" type="video/mp4">
  </video>
</div>

data-scrub-distance controls how far the user scrolls to play the full video. data-scrub-pin="true" pins the container during playback.

Scroll-activated tabs

Pinned section that switches content as the user scrolls through it.

<section data-premium-tabs data-tab-pin-distance="400vh">
  <nav class="tabs-nav">
    <button class="tab-trigger" data-tab="0">Implants</button>
    <button class="tab-trigger" data-tab="1">Cosmetic</button>
    <button class="tab-trigger" data-tab="2">Preventive</button>
  </nav>
  <div class="tabs-content">
    <div class="tab-panel" data-tab-panel="0">Implants content</div>
    <div class="tab-panel" data-tab-panel="1">Cosmetic content</div>
    <div class="tab-panel" data-tab-panel="2">Preventive content</div>
  </div>
</section>

Dream site recipes

Signature compositions mapped to design references. See ANIMATION-REFERENCE.md in the repo root for the full per-recipe breakdown.

Recipe	Key techniques
Daylight Computer	`morph-light-to-dark`, `grain-overlay`, `ken-burns`, `data-scroll-text-split`, `data-scroll-horizontal`, `magnetic`
RealFood.gov	`section-warm` + `section-dark` alternation, `clip-rise-reveal`, `data-premium-counter`, `image-gradient-bottom`, `text-highlight`
Legend.xyz	`section-dark`, `glass-card`, `text-gradient`, `data-scroll-batch`, `divider-gradient`, `cursor-spotlight`, `hover-glow`
Luxury / Law	`grain-overlay--light`, `ken-burns--slow`, `clip-curtain-reveal`, `morph-light-to-dark`, `text-stroke`, `glass--light` nav
Modern Medical	`video-bg--gradient` hero, `data-premium-hero`, `data-premium-counter`, `image-reveal`, `section-warm`, `text-highlight`

Premium

On this page