Animated grain generated per frame in an ImageData buffer, blended over any surface.
2,260
Bookmarks
3,400
Installs
58,100
Views
import { GrainOverlay } from "@/components/ui/grain-overlay"
export default function DemoGrainOverlay() {
return (
<div className="relative flex min-h-[340px] w-full items-center justify-center overflow-hidden bg-[radial-gradient(120%_120%_at_30%_10%,#3b1d6e,#0a0616_65%)]">
<GrainOverlay opacity={0.16} />7 more lines behind a plan
Previews are free to watch. Reading and copying the full source needs a plan.
See plansThat's all 6 components
Part of Wren Micro — browse the full library on Nuxus.