Chapter 3: Hero & Scroll Sections

Core Idea

Above-the-fold hero layouts and scroll-driven reveal effects — the components that set the first impression of a marketing page and react to scroll position.

Reference Table

Name	Purpose	Install
Hero Highlight	Background effect with a text-highlight accent, built for hero copy	npx shadcn@latest add @aceternity/hero-highlight
Hero Sections	A set of ready hero layouts, simple to complex	npx shadcn@latest add @aceternity/hero-sections-free
Hero Parallax	Scroll-driven rotation/translation/opacity effect	npx shadcn@latest add @aceternity/hero-parallax
Parallax Hero Images	Mouse-driven parallax with depth-blurred image layers	npx shadcn@latest add @aceternity/parallax-hero-images
Sticky Scroll Reveal	Sticky container with text that reveals as the user scrolls	npx shadcn@latest add @aceternity/sticky-scroll-reveal
Container Scroll Animation	3D-rotate-on-scroll container, built for hero/marketing sections	npx shadcn@latest add @aceternity/container-scroll-animation
Fey.com Macbook Scroll	Image "pops out" of a MacBook screen mockup on scroll (as seen on Fey.com)	npx shadcn@latest add @aceternity/macbook-scroll
Lamp Section Header	Lamp-glow effect for section headers (as seen on Linear)	npx shadcn@latest add @aceternity/lamp-effect
Spotlight	Tailwind CSS spotlight effect to draw attention to an element	npx shadcn@latest add @aceternity/spotlight
Spotlight New	Configurable dual-side (left/right) spotlight variant	npx shadcn@latest add @aceternity/spotlight-new
Tracing Beam	SVG beam that follows scroll position/speed down a page	npx shadcn@latest add @aceternity/tracing-beam
Sticky Banner	Top banner that sticks and hides on scroll-down	npx shadcn@latest add @aceternity/sticky-banner

Key Takeaways

1. Scroll-linked components (Hero Parallax, Sticky Scroll Reveal, Container Scroll Animation, Tracing Beam) generally read scroll progress via Motion's useScroll — check each one's anatomy before combining two on the same page, since competing scroll listeners can hurt performance.
2. Spotlight vs Spotlight New: prefer Spotlight New for a configurable two-sided spotlight; plain Spotlight is the simpler single-effect original.
3. Fey.com Macbook Scroll is a specific, recognizable device-mockup effect — use deliberately when a product screenshot reveal is the goal, not as a generic hero background.

Connects To

• ch002 (Backgrounds & Ambient Effects): the backdrop layer these hero sections often sit on top of.
• ch008 (Carousels & Testimonials): Feature Sections, a sibling free-form marketing-section bundle.