shaderscn

Shader components you can copy and paste.

Sections, backgrounds and components built on Paper Shaders. Install them with the shadcn CLI or copy the code straight into your app.

A full-bleed hero section lit by animated volumetric light rays.

A split hero section with an ordered-dither sphere slowly turning beside the headline.

A split hero section with a slowly spinning, ordered-dither globe of the Earth.

A centered hero section with a rising ordered-dither globe and flight arcs between cities.

A split hero section that prints any photo as halftone dots, live on the GPU.

A full-bleed hero lit by rippling pool-light caustics. Made for travel and wellness sites.

A launch hero where your logo glows like a heat map above the headline.

Warp CTA

Section

A call-to-action banner with a hypnotic warped checkerboard background.

An app download section with a phone mockup in front of its own screenshot, seen through fluted glass.

A compact newsletter signup band with slowly turning glass panels beside the form.

A three-tier pricing section with a billing toggle and a pulsing glow around the featured plan.

A masonry wall of testimonial cards with a printed paper grain.

A team grid that dithers every headshot into one consistent look, with the original color on hover.

A changelog timeline where every release gets its own cover, generated from the version number.

A "trusted by" logo strip rising over the glowing horizon of a planet.

A band of headline numbers over a glowing web of fibers, like traffic moving through a network.

A full-screen not found page with a dithered vortex behind a lost message.

A full-screen coming soon page with a smoke ring, a launch countdown and a waitlist signup.

A launch event countdown over a turning spiral, with add-to-calendar links and a live state.

A site footer with a giant wordmark filled by a flowing mesh gradient.

A thin, dismissible announcement strip over a slowly flowing mesh gradient.

A split sign-in page with a grainy gradient brand panel and a slot for your own form.

A container with a soft, flowing mesh gradient behind its content.

A container with a crisp dot grid that fades out towards the edges.

A container with fine, flowing line waves. Made for fintech and audio pages.

A card wrapped in a living, pulsing glow that bleeds softly past its edges.

An AI prompt input with modes and file drops, whose glow shows what it is doing: listening, thinking, streaming or failing.

A content card with a grainy, animated gradient cover.

A card set in a thick frame of animated dithering, like a bezel around the content.

A chrome orb with a liquid metal surface. Great as a logo mark or avatar.

A default avatar with a unique mesh gradient generated from any seed, like a user ID or email.

An image card with a magnifying lens that follows the cursor.

A call-to-action button with a flowing chrome rim that speeds up on hover.