3D Animation

Heroes 765

About

A responsive and cinematic hero section component that displays text scrolling along the walls of a 3D animated hallway. It includes a reflection, parallax effects, and customizable imagery.

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

Code

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

Usage.tsx

import React from 'react';
import { PoemAnimation } from "@/components/ui/3d-animation";


// --- Data Configuration ---
const ANIMATION_DATA = {
    poemHTML: `
        <p>The <span>love</span> between Ayla and Leo ignited in the old courtyard, each morning their swords clashed under dawn’s glow, faces streaked with <span>dust</span> and sweat; they <span>danced</span> between parries, every laugh a spark of joy against uncertain hearts. She stepped forward with <span>courage</span>, he met her gaze with open warmth, two souls seeking a shared <span>triumph</span> in their vulnerability. When blades slipped and one <span>faltered</span>, the other caught them—forearms brushing, pulses aligned in a daring heartbeat. In failure they found grace; in triumph they discovered unity. Each moment spent <span>daring</span> to trust the other built a bond impervious to fear. At dusk, they sheathed their swords, stepping from the <span>arena</span> hand in hand, knowing love blooms not through perfection, but by <span>daring greatly</span> together.</p>
`,
    backgroundImageUrl: "https://cdn.21st.dev/assets/mirror/7c/7cb8f3c46e2fedba57c13eaffd4a9dba0cf070b93190982934a3bb251badefe4.jpg",
    boyImageUrl: "https://cdn.21st.dev/assets/mirror/14/146f5061f7c384fbff0ab8a5623c755228729d8ea6b2df0aa3e243f6a191a357.png"
};


/**
 * The main application component, which composes the page from different sections.
 */
export default function App() {
    // In a standard React project, you would place font links in your main public/index.html file.
    // For this environment, we assume they are available or can be added there.
    return (
        <PoemAnimation
            poemHTML={ANIMATION_DATA.poemHTML}
            backgroundImageUrl={ANIMATION_DATA.backgroundImageUrl}
            boyImageUrl={ANIMATION_DATA.boyImageUrl}
        />
    );
}