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.

Effects in this tier

Class tables, code, and live demos live on the effect pages. This page owns what the tier loads, the section-theming presets, and the premium-scroll.js orchestration API below.

Effect	Classes	Reference
Film grain	`.grain-overlay` and modifiers	Overlays
Glassmorphism	`.glass`, `.glass--light`, `.glass--dark`, `.glass-card`	Overlays
Magnetic cursor, cursor spotlight	`.magnetic`, `.cursor-spotlight`	Hover
Clip-path reveals	`.clip-circle-reveal` and siblings	Scroll reveals
Advanced typography	`.text-gradient`, `.text-stroke` and siblings	Typography
Video backgrounds, scroll-scrubbed video	`.video-bg` and modifiers	Video

Section theming

Section-level color presets, defined in css/premium-effects.css. Combine with grain, glass, and dividers to build atmosphere.

.section-dark

Dark background

.section-light

Light background

.section-warm

Warm/cream background

.section-brand

Brand primary background

Class	Background
`.section-dark`	Dark background
`.section-light`	Light background
`.section-warm`	Warm / cream background
`.section-brand`	Brand primary background

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>

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, built from the effects documented across the Motion pages.

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