Skip to main content

Pulse Stripes Layout

Full landing page layout with animated pulse stripe hero, number flow stats, brand marquee, and scroll-driven character reveal insights section.

HeroReactFramer MotionTailwind CSSNumber Flow
CSSTailwind

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Header } from "@/components/header";
import { Hero } from "@/components/hero";
import { BrandMarquee } from "@/components/brand-marquee";
import { InsightsSection } from "@/components/insights-section";

function Demo() {
  return (
    <main className="min-h-dvh bg-neutral-950 pb-125">
      <Header />
      <Hero />
      <BrandMarquee />
      <InsightsSection />
    </main>
  );
}

export default Demo;

Update the import paths to match your project setup.

Similar components

Parallax Mountain Hero

3D Showcase Hero

Liquid Reveal

Grid Distortion

Live Preview

Resource details

PublishedMarch 12, 2026
CategoryHero
ReactFramer MotionTailwind CSSNumber Flow