Dithering Frame Card

A readable content card surrounded by an animated ordered-dither shader frame.

Ideas with an edge.

A moving dither frame, with room to make something your own.

A crisp pixel texture surrounds your content while the center stays clear and readable.

A content card surrounded by the animated Dither Background shader. One shader fills the frame while an opaque inner card keeps content readable.

Installation

text

Add the dithering-frame-card component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/dithering-frame-card.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { DitheringFrameCard } from "@/components/hangry-ui/components/dithering-frame-card";
import { CardHeader, CardTitle, CardDescription, CardContent } from "@/components/hangry-ui/components/card";

<DitheringFrameCard frameWidth={16} pixelSize={3} speed={0.4}>
  <CardHeader>
    <CardTitle>Ideas with an edge.</CardTitle>
    <CardDescription>A dither frame for your next project.</CardDescription>
  </CardHeader>
  <CardContent>Your content goes here.</CardContent>
</DitheringFrameCard>

Props

Prop	Type	Default	Description
`frameWidth`	`number`	`12`	Frame thickness in CSS pixels; minimum 0.
`color`	`[number, number, number]`	`[0.02, 0.86, 0.5]`	Shader foreground RGB channels from 0 to 1.
`backgroundColor`	`[number, number, number]`	`[0.02, 0.04, 0.035]`	Shader background RGB channels from 0 to 1.
`pixelSize`	`number`	`3`	Dither cell size in CSS pixels; minimum 1.
`speed`	`number`	`0.4`	Wave speed; 0 produces a still frame.
`contentClassName`	`string`	—	Additional classes for the inner Card.
`children`	`ReactNode`	Example heading and description	Content inside the Card; supports all Card composition parts.
Native div props	`ComponentProps`	—	Classes, styles, and attributes on the outer frame; color is reserved for the shader.

Dependencies

Motion
vgpu