Sroll Animation

Heroes

About

A dynamic 3d scroll animated experience that reveals a header and call-to-action.. A procedural 3d forest scene with an old enchanted doorway. As the user scrolls the camera moves forward and the door opens to reveal a marketing message

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

Code

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

Usage.tsx

import EnchantedForestHero from "@/components/ui/sroll-animation";
import React from "react";

export default function EnchantedForestHeroDemo() {
  return (
    <EnchantedForestHero
      message={{
        title: "THE THRESHOLD",
        lines: [
          "Every journey begins with a single step",
          "Through the door of possibility",
          "Into the realm of the extraordinary",
        ],
        wisdom:
          "What lies behind us and what lies before us are tiny matters compared to what lies within us.",
        author: "- Ralph Waldo Emerson",
      }}
      enableBloom
      bloomStrength={0.8}
      heightVh={300}
      showProgressIndicator
      onPhaseChange={(p) => console.log("Phase:", p)}
      onProgress={(v) => console.log("Progress:", v.toFixed(2))}
      theme={{
        // You can override to match your design system
        // background: "220 80% 2%",
        // accent: "205 100% 75%",
      }}
    />
  );
}