Block · CLI

Hero Parallax

Scroll-scrubbed hero with drifting proof rows. Install as @atroui/hero-parallax.

Preview

npx shadcn@latest add @atroui/hero-parallax

Why teams switch

Scroll through the proof.

Real workflows, shipped by real teams. Replace these cards with your own customer stories.

Start your project

See the work

01
Checkout in 6 days
Stripe + inventory, live before launch.
02
AI support triage
Grounded answers, human escalation.
03
Design system v2
Tokens, docs, and 40 components.
04
Onboarding revamp
Activation up without a rewrite.
01
Checkout in 6 days
Stripe + inventory, live before launch.
02
AI support triage
Grounded answers, human escalation.
03
Design system v2
Tokens, docs, and 40 components.
04
Onboarding revamp
Activation up without a rewrite.

01
Docs that convert
Search, examples, and copy that sells.
02
Internal admin
Ops tooling the team actually uses.
03
Mobile PWA
Offline-first field app for crews.
04
Analytics rollout
Events, dashboards, and decisions.
01
Docs that convert
Search, examples, and copy that sells.
02
Internal admin
Ops tooling the team actually uses.
03
Mobile PWA
Offline-first field app for crews.
04
Analytics rollout
Events, dashboards, and decisions.

01
Migration rescue
Off legacy hosting with zero downtime.
02
Brand refresh
New voice, same customers — louder.
03
API platform
Versioned, documented, dependable.
04
Launch week
Scoped Monday, shipped Friday.
01
Migration rescue
Off legacy hosting with zero downtime.
02
Brand refresh
New voice, same customers — louder.
03
API platform
Versioned, documented, dependable.
04
Launch week
Scoped Monday, shipped Friday.

Installation

Agent blurb — install command + no npm UI rule. For agents

npx shadcn@latest add @atroui/hero-parallax

Source lands in your repo. Installation · Registry

Usage

Mount once at the top of a marketing page. After install, edit the CONTENT and ROWS objects at the top of the file. Rows drift on scroll and render static under reduced motion.

tsx

import { HeroParallax } from "@/components/blocks/hero-parallax"

export function Example() {
  return <HeroParallax />
}

Preview

npx shadcn@latest add @atroui/hero-parallax

Why teams switch

Scroll through the proof.

Real workflows, shipped by real teams. Replace these cards with your own customer stories.

Start your project

See the work

01
Checkout in 6 days
Stripe + inventory, live before launch.
02
AI support triage
Grounded answers, human escalation.
03
Design system v2
Tokens, docs, and 40 components.
04
Onboarding revamp
Activation up without a rewrite.
01
Checkout in 6 days
Stripe + inventory, live before launch.
02
AI support triage
Grounded answers, human escalation.
03
Design system v2
Tokens, docs, and 40 components.
04
Onboarding revamp
Activation up without a rewrite.

01
Docs that convert
Search, examples, and copy that sells.
02
Internal admin
Ops tooling the team actually uses.
03
Mobile PWA
Offline-first field app for crews.
04
Analytics rollout
Events, dashboards, and decisions.
01
Docs that convert
Search, examples, and copy that sells.
02
Internal admin
Ops tooling the team actually uses.
03
Mobile PWA
Offline-first field app for crews.
04
Analytics rollout
Events, dashboards, and decisions.

01
Migration rescue
Off legacy hosting with zero downtime.
02
Brand refresh
New voice, same customers — louder.
03
API platform
Versioned, documented, dependable.
04
Launch week
Scoped Monday, shipped Friday.
01
Migration rescue
Off legacy hosting with zero downtime.
02
Brand refresh
New voice, same customers — louder.
03
API platform
Versioned, documented, dependable.
04
Launch week
Scoped Monday, shipped Friday.

Usage

Mount once at the top of a marketing page. After install, edit the CONTENT and ROWS objects at the top of the file. Rows drift on scroll and render static under reduced motion.

tsx

import { HeroParallax } from "@/components/blocks/hero-parallax"

export function Example() {
  return <HeroParallax />
}

import { HeroParallax } from "@/components/blocks/hero-parallax"

export function Example() {
  return <HeroParallax />
}