---
name: "@shaderscn"
slug: "shaderscn"
description: "Copy-paste shader sections and components for shadcn/ui, built on Paper Shaders."
category: "AI/chat UI"
tags: ["3d", "ai", "auth", "backgrounds", "blocks", "buttons", "cards", "charts", "developer-tools", "glassmorphism", "icons", "maps", "marketing", "media", "onboarding"]
framework: "react"
license: "MIT"
author: "mnove"
website: "https://www.shaderscn.com"
github: "https://github.com/mnove/shaderscn"
registry: "https://www.shaderscn.com/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 33
generated_at: "2026-10-10T06:32:55.998Z"
---

# @shaderscn

Copy-paste shader sections and components for shadcn/ui, built on Paper Shaders.

## Links

- Website: https://www.shaderscn.com
- GitHub: https://github.com/mnove/shaderscn
- Registry JSON: https://www.shaderscn.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/shaderscn
- This file: https://sh4dcn.vercel.app/md/shaderscn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.shaderscn.com/r/registry.json
pnpm dlx shadcn@latest add https://www.shaderscn.com/r/registry.json
bunx shadcn@latest add https://www.shaderscn.com/r/registry.json
# clone the source repo
git clone https://github.com/mnove/shaderscn.git
# fetch the raw registry index
curl -s https://www.shaderscn.com/r/registry.json
```

## Components (33)

| name | type | description | install |
| --- | --- | --- | --- |
| god-rays-hero | registry:block | A full-bleed hero section lit by animated volumetric light rays. | `npx shadcn@latest add https://www.shaderscn.com/r/god-rays-hero.json` |
| dithering-hero | registry:block | A split hero section with an ordered-dither sphere slowly turning beside the headline. | `npx shadcn@latest add https://www.shaderscn.com/r/dithering-hero.json` |
| dithering-globe-hero | registry:block | A split hero section with a slowly spinning, ordered-dither globe of the Earth. | `npx shadcn@latest add https://www.shaderscn.com/r/dithering-globe-hero.json` |
| dithering-globe-arcs-hero | registry:block | A centered hero section with a rising ordered-dither globe and flight arcs between cities. | `npx shadcn@latest add https://www.shaderscn.com/r/dithering-globe-arcs-hero.json` |
| halftone-hero | registry:block | A split hero section that prints any photo as halftone dots, live on the GPU. | `npx shadcn@latest add https://www.shaderscn.com/r/halftone-hero.json` |
| water-caustics-hero | registry:block | A full-bleed hero lit by rippling pool-light caustics. Made for travel and wellness sites. | `npx shadcn@latest add https://www.shaderscn.com/r/water-caustics-hero.json` |
| heatmap-hero | registry:block | A launch hero where your logo glows like a heat map above the headline. | `npx shadcn@latest add https://www.shaderscn.com/r/heatmap-hero.json` |
| warp-cta | registry:block | A call-to-action banner with a hypnotic warped checkerboard background. | `npx shadcn@latest add https://www.shaderscn.com/r/warp-cta.json` |
| fluted-glass-app-download | registry:block | An app download section with a phone mockup in front of its own screenshot, seen through fluted glass. | `npx shadcn@latest add https://www.shaderscn.com/r/fluted-glass-app-download.json` |
| color-panels-newsletter | registry:block | A compact newsletter signup band with slowly turning glass panels beside the form. | `npx shadcn@latest add https://www.shaderscn.com/r/color-panels-newsletter.json` |
| pulsing-border-pricing | registry:block | A three-tier pricing section with a billing toggle and a pulsing glow around the featured plan. | `npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-pricing.json` |
| testimonial-wall | registry:block | A masonry wall of testimonial cards with a printed paper grain. | `npx shadcn@latest add https://www.shaderscn.com/r/testimonial-wall.json` |
| image-dithering-team | registry:block | A team grid that dithers every headshot into one consistent look, with the original color on hover. | `npx shadcn@latest add https://www.shaderscn.com/r/image-dithering-team.json` |
| simplex-noise-changelog | registry:block | A changelog timeline where every release gets its own cover, generated from the version number. | `npx shadcn@latest add https://www.shaderscn.com/r/simplex-noise-changelog.json` |
| radial-gradient-logo-cloud | registry:block | A "trusted by" logo strip rising over the glowing horizon of a planet. | `npx shadcn@latest add https://www.shaderscn.com/r/radial-gradient-logo-cloud.json` |
| neuro-noise-stats | registry:block | A band of headline numbers over a glowing web of fibers, like traffic moving through a network. | `npx shadcn@latest add https://www.shaderscn.com/r/neuro-noise-stats.json` |
| dithering-404 | registry:block | A full-screen not found page with a dithered vortex behind a lost message. | `npx shadcn@latest add https://www.shaderscn.com/r/dithering-404.json` |
| smoke-ring-waitlist | registry:block | A full-screen coming soon page with a smoke ring, a launch countdown and a waitlist signup. | `npx shadcn@latest add https://www.shaderscn.com/r/smoke-ring-waitlist.json` |
| spiral-launch-countdown | registry:block | A launch event countdown over a turning spiral, with add-to-calendar links and a live state. | `npx shadcn@latest add https://www.shaderscn.com/r/spiral-launch-countdown.json` |
| mesh-gradient-footer | registry:block | A site footer with a giant wordmark filled by a flowing mesh gradient. | `npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-footer.json` |
| mesh-gradient-announcement-bar | registry:block | A thin, dismissible announcement strip over a slowly flowing mesh gradient. | `npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-announcement-bar.json` |
| grain-gradient-auth | registry:block | A split sign-in page with a grainy gradient brand panel and a slot for your own form. | `npx shadcn@latest add https://www.shaderscn.com/r/grain-gradient-auth.json` |
| mesh-gradient-background | registry:component | A container with a soft, flowing mesh gradient behind its content. | `npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-background.json` |
| dot-grid-background | registry:component | A container with a crisp dot grid that fades out towards the edges. | `npx shadcn@latest add https://www.shaderscn.com/r/dot-grid-background.json` |
| waves-background | registry:component | A container with fine, flowing line waves. Made for fintech and audio pages. | `npx shadcn@latest add https://www.shaderscn.com/r/waves-background.json` |
| pulsing-border-card | registry:component | A card wrapped in a living, pulsing glow that bleeds softly past its edges. | `npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-card.json` |
| pulsing-border-prompt | registry:component | An AI prompt input with modes and file drops, whose glow shows what it is doing: listening, thinking, streaming or failing. | `npx shadcn@latest add https://www.shaderscn.com/r/pulsing-border-prompt.json` |
| grain-gradient-card | registry:component | A content card with a grainy, animated gradient cover. | `npx shadcn@latest add https://www.shaderscn.com/r/grain-gradient-card.json` |
| dithering-frame-card | registry:component | A card set in a thick frame of animated dithering, like a bezel around the content. | `npx shadcn@latest add https://www.shaderscn.com/r/dithering-frame-card.json` |
| liquid-metal-orb | registry:component | A chrome orb with a liquid metal surface. Great as a logo mark or avatar. | `npx shadcn@latest add https://www.shaderscn.com/r/liquid-metal-orb.json` |
| mesh-gradient-avatar | registry:component | A default avatar with a unique mesh gradient generated from any seed, like a user ID or email. | `npx shadcn@latest add https://www.shaderscn.com/r/mesh-gradient-avatar.json` |
| lens-distortion-card | registry:component | An image card with a magnifying lens that follows the cursor. | `npx shadcn@latest add https://www.shaderscn.com/r/lens-distortion-card.json` |
| liquid-metal-button | registry:component | A call-to-action button with a flowing chrome rim that speeds up on hover. | `npx shadcn@latest add https://www.shaderscn.com/r/liquid-metal-button.json` |

## For AI agents

```text
You are adding components from @shaderscn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/shaderscn.md) for the component list.
2. Fetch the machine-readable index: https://www.shaderscn.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: shaderscn).
```