When generating websites or landing pages, ALWAYS include the full scroll effects system. Mike wants sites to feel premium and animated, not static.
Why: Static sites look cheap. The scroll effects are what make business owners go “holy shit someone built THIS for me.” Confirmed working and approved on the insurance website demo templates (Mar 23, 2026).
How to apply: Include these effects on ALL generated sites — insurance templates, demo pages, client sites, any web page we build:
The Effects (all pure CSS + vanilla JS, zero dependencies)
- Hero cascade entrance — eyebrow, h1, description, CTAs, trust bar animate in sequence on page load (200ms, 350ms, 500ms, 650ms, 800ms delays)
- Hero image slide-in — slides from right with slight scale, 0.4s delay
- Video parallax — hero background video moves at 0.3x scroll speed via requestAnimationFrame
- Stats counter animation — numbers count up from 0 with ease-out cubic when scrolled into view
- Staggered card reveals — add
.staggerto parent,.revealto children. Cards fade up with 80ms delay between each (supports up to 6 children) - Slide from left/right —
.reveal-left/.reveal-rightfor asymmetric layouts (e.g., image left, text right) - Scale reveal —
.reveal-scalefor badges, floating cards - Section heading cascade —
.s-eyebrow,.s-heading,.s-subanimate in sequence when section scrolls into view - CTA card entrance — scales up from 0.97 + fades in
- Nav shadow on scroll — subtle box-shadow appears after scrolling 100px
Implementation
- CSS classes:
.reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger - JS: IntersectionObserver-based, fires once per element (unobserves after visible)
- Performance: uses
requestAnimationFrame,will-change: transform, passive scroll listeners - Mobile: all effects work on mobile, no heavy animations
Reference Implementation
C:\Users\mmoor\no-website-bot\samples\cruz-insurance-group\index-video.html— the full working example with all effects