Pixel perfect Hero

Heroes 886

About

Interactive hero section with a Canvas-based pixel ripple animation, shimmering glassmorphism header, and logo marquee. Features dynamic theme-color detection, responsive layout, and prefers-reduced-motion accessibility.

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

Code

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

Usage.tsx

import React from "react";
import { PixelHero } from "@/components/ui/pixel-perfect-hero";

export default function Demo() {
  return (
    <div className="w-full min-h-screen bg-background">
      <PixelHero
        word1="Silent"
        word2="Precision."
        description="Interfaces with refined motion. Every calculated detail delivers an elevated digital experience."
        primaryCta="Explore Design"
        primaryCtaMobile="Explore"
        secondaryCta="View GitHub"
        secondaryCtaMobile="GitHub"
        onPrimaryClick={() => console.log("Primary click action triggered.")}
        onSecondaryClick={() => console.log("Secondary click action triggered.")}
        githubUrl="https://github.com"
      />
    </div>
  );
}