SO called

3D Boxes Hero

Heroes 995

About

3D Hero Section With Animated Boxes

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds 3D Boxes Hero to your project and fits it to your theme.

Code

How 3D Boxes Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { HeroSection } from "@/components/blocks/3d-hero-section-boxes"

// This is the main component for this specific page/route
export function HomePage() {
  return (
    // You might have a <main> tag or other wrappers provided by your layout.tsx
    // but the core usage is just rendering the component.
    <div>
      <HeroSection />

      {/* Optional: Add other sections of your page below the hero */}
      {/*
      <section className="py-16 bg-white text-black">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">Features Section</h2>
          <p>More content goes here...</p>
        </div>
      </section>
      */}
    </div>
  );
}

Dependencies

More by SO called

View all
  • Developer Sign-In Flow

    Developer Sign-In Flow

    3.2K
  • Interactive 3D Robot

    Interactive 3D Robot

    2.1K
  • Animated Characters Login Page

    Animated Characters Login Page

    1.6K
  • Interactive Galaxy Hero

    Interactive Galaxy Hero

    1.4K
  • Product Mockup Section

    Product Mockup Section

    1.4K
  • Expandable Content Card

    Expandable Content Card

    990
  • AI Prompt Input

    AI Prompt Input

    617
  • Star Button

    Star Button

    615

More in Heroes

View all
  • SaaS Template

    SaaS Template

    2.4K
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • Hero

    Hero

    1.2K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    931
  • Editorial Collage Hero

    Editorial Collage Hero

    430
  • Glass Fold

    Glass Fold

    212
  • Minimalist Hero Fashion

    Minimalist Hero Fashion

    285
  • HeroSectionWithGradient

    HeroSectionWithGradient

    336