Staggered Grid

A stunning scroll-animated grid layout with staggered column animations, expandable bento cards, and GSAP-powered scroll triggers. Creates a premium, magazine-style layout experience.

HALCYON

GSAP AnimationsScroll TriggeredBento Cards

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/staggered-grid.json"

Install Manually

Install dependencies

npm install gsap lenis clsx tailwind-merge

Copy the SmoothScroll component

Copy into components/ui/smooth-scroll.tsx

Copy the StaggeredGrid component

Copy into components/ui/staggered-grid.tsx

Note: This component uses GSAP ScrollTrigger for scroll-based animations. Best viewed in a full-page layout with smooth scrolling enabled.

Usage

import { StaggeredGrid, BentoItem } from "@/components/ui/staggered-grid"
import { SmoothScroll } from "@/components/ui/smooth-scroll"
import { Github, Slack, Twitter } from "lucide-react"
 
export default function Page() {
  const images = Array.from({ length: 20 }, (_, i) => `/img/${i + 1}.jpg`)
 
  const bentoItems: BentoItem[] = [
    {
      id: 1,
      title: "Repository",
      subtitle: "Version Control",
      description: "Secure, scalable code management.",
      icon: <Github className="w-4 h-4" />,
      image: "/img/1.jpg"
    },
    // ... more items
  ]
 
  return (
    <SmoothScroll>
      <main className="min-h-screen bg-black">
        <StaggeredGrid
          images={images}
          bentoItems={bentoItems}
          centerText="HALCYON"
        />
      </main>
    </SmoothScroll>
  )
}

Props

StaggeredGridProps

Prop Name	Type	Default	Description
images	`string[]`	`-`	Array of image URLs to display in the grid cells
bentoItems	`BentoItem[]`	`-`	Array of bento items for the expandable cards section
centerText	`string`	`"Halcyon"`	Large centered text displayed above the grid with character animation
credits	`object`	`-`	Footer credits configuration with 'madeBy' and 'moreDemos' links
className	`string`	`-`	Additional CSS classes for the container
showFooter	`boolean`	`true`	Whether to show the footer credits section

BentoItem

Prop Name	Type	Default	Description
id	`number \| string`	`-`	Unique identifier for the bento item
title	`string`	`-`	Title displayed in the card footer
subtitle	`string`	`-`	Subtitle for the bento item
description	`string`	`-`	Description text for the bento item
icon	`React.ReactNode`	`-`	Icon component displayed in the card
image	`string`	`-`	Background image URL for the expanded card

Features

Staggered Column Animation: Grid items animate in with staggered delays based on their column position, creating a wave-like effect from the center outward
Expandable Bento Cards: Interactive cards that expand on hover to reveal full-width images with smooth transitions
Scroll-Triggered Animations: All animations are tied to scroll position using GSAP ScrollTrigger for a smooth experience
Text Character Animation: The centered text animates character-by-character as you scroll
Grid Icons with Hover Reveal: Each grid cell shows icons with text reveal on hover
Dark Mode Optimized: Designed with a dark theme using zinc color palette
Smooth Scrolling: Uses Lenis for buttery-smooth scroll experience
GPU Acceleration: Uses will-change and force3D for hardware-accelerated animations

Stacked Logos Testimonials Card