Crypto hero

Heroes 129

About

A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary/secondary CTAs. Designed for dramatic, immersive landing pages and product intros; supports children override for custom content.

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

Code

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

Usage.tsx

import VaultoryHero from "@/components/ui/crypto-hero";

const settings = {
  title: "The future of",
  subtitle: "digital finance.",
  description:
    "Store, send and grow your crypto in one secure wallet. Built for everyone, trusted by millions around the world.",
  emailPlaceholder: "name@email.com",
  ctaLabel: "Get Started",
  loginLabel: "Log in",
  signupLabel: "Sign up",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  const coinIcon = (glyph: string) => (
    <span style={{ fontSize: 20, fontWeight: 700, color: "#000" }}>
      {glyph}
    </span>
  );

  return (
    <div className="h-screen w-screen">
      <VaultoryHero
        logo={
          <span
            style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 24,
              fontWeight: 700,
              color: "#FFFFFF",
            }}
          >
            Vaultory
          </span>
        }
        title={s.title}
        subtitle={s.subtitle}
        description={s.description}
        emailPlaceholder={s.emailPlaceholder}
        ctaButton={{ label: s.ctaLabel, onClick: () => {} }}
        navItems={[
          { label: "Features", onClick: () => {} },
          { label: "Pricing", onClick: () => {} },
          { label: "About", onClick: () => {} },
        ]}
        authButtons={{
          login: { label: s.loginLabel, onClick: () => {} },
          signup: { label: s.signupLabel, onClick: () => {} },
        }}
        cryptoCoins={[
          {
            icon: coinIcon("₿"),
            size: 80,
            position: { x: "5%", y: "10%" },
            delay: 0,
          },
          {
            icon: coinIcon("Ξ"),
            size: 70,
            position: { x: "70%", y: "20%" },
            delay: 0.2,
          },
          {
            icon: coinIcon("◎"),
            size: 60,
            position: { x: "10%", y: "70%" },
            delay: 0.4,
          },
          {
            icon: coinIcon("₮"),
            size: 65,
            position: { x: "75%", y: "65%" },
            delay: 0.6,
          },
        ]}
        walletImage={
          <div
            style={{
              width: 320,
              height: 420,
              borderRadius: 24,
              background: "rgba(196, 255, 13, 0.05)",
              border: "1px solid rgba(196, 255, 13, 0.3)",
              boxShadow: "0 0 80px rgba(196, 255, 13, 0.2)",
            }}
          />
        }
      />
    </div>
  );
}