Hero Dithering

A split-layout hero section with dithering visuals, CTA, and tech stack badges. Renders responsive shader effects and customizable content. Use for showcasing projects or products with visual flair.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/hero-dithering

npx layro-cli add @nolly-studio/hero-dithering

npx layro-cli add @nolly-studio/hero-dithering

bunx layro-cli add @nolly-studio/hero-dithering

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

import * as React from "react"
import type { SVGProps } from "react"
import { Dithering } from "@paper-design/shaders-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

const MemoizedDithering = React.memo(Dithering)

type DitheringProps = React.ComponentProps<typeof Dithering>
type DitheringIcon = React.ComponentType<SVGProps<SVGSVGElement>>