Dot Grid · Triangles

Animated WebGL shader background in the Dot Grid style. Triangles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#071013, #ECFEFF, #22D3EE, #155E75). A drop-in, zero-dependency React component for hero sections and animated gradient/noise backgrounds.

by Paper Shaders

Open in editor

import { ShaderBackground } from "@/components/ui/dot-grid-triangles"

export default function ShaderBackgroundDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <ShaderBackground className="h-full w-full" />
    </div>
  )
}

Source

shaders.paper.design

Published

7/23/2026

Similar components

Explore more

Animation components144 Background components365 Hero components1152 Animated components16 WebGL components397

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Dot Grid · Triangles

Tags

Source

Published

Similar components

Explore more