Pixel Dither Hero Section Component — React & TypeScript

0views

8/13

A split hero with a dithered pixel plate. A square lens follows the cursor and renders full detail while the rest stays in coarse blocks, with a live readout of pixels saved. Fits video, imaging and developer tool landing pages.

Installation

How to use

// Save the component as components/foveal-pixel-lens-hero.tsx (it already includes "use client")
// Optional: load the Schibsted Grotesk font and set --fv-font on a parent element
import FovealHero from "@/components/foveal-pixel-lens-hero";

export default function Page() {
  return (
    <FovealHero
      theme="light"
      title="Spend pixels where people look."
      description="Full resolution around the viewer's gaze, a fraction of it everywhere else."
      primaryCta={{ label: "Start streaming free", href: "/signup" }}
      secondaryCta={{ label: "Read the benchmarks", href: "/benchmarks" }}
      // image="/hero.jpg" // optional, same-origin or CORS-enabled, otherwise the built-in scene is used
    />
  );
}

Dependencies

No extra dependencies listed.

Back to all components More Hero

Pixel Dither Hero Section Component — React & TypeScript

Related components

Terrain Video Hero Section

3D Crypto Exchange Landing Page

Animated 3D Ribbon Hero Section — React & Framer Motion Component

Time, Distilled to Its Essence

Cinematic Hero Banner with Autoplay Video Background

Écarlate Hero — Luxury Perfume Product Hero Section for React