Skip to content

Shader backgrounds, shaped for the web.

Animated WebGPU backgrounds with live controls. Tune one, then export a component for React, Vue, HTML or WordPress, or paste it into Framer.

95 curated shaders 433 color Looks 64 blocks performance benchmarked

95 shader systems indexed

433 color Looks

64 blocks

WebGPU + WGSL

Measured performance

A SHORTER PATH TO PRODUCTION

From shader to production component.

Choose

Start from a curated surface with a clear visual role and measured baseline.

Tune

Adjust purposeful parameters while the GPU preview responds in real time.

Export

Take a ready-to-integrate component for React, Vue, HTML, WordPress or Framer, or the raw WGSL source.

A live shader editor,
not a color picker.

Every surface opens in a focused workbench. Shape motion, atmosphere and interaction with controls mapped to the shader's actual parameters.

Live GPU preview
Typed controls
Export-ready output
/shaders/silk-bands/edit

Recorded walkthrough of Silk Bands responding as its band count, folds and motion are adjusted.

SELECTED SURFACES

Animated backgrounds, ready to tune.

View the full index

Hero sections, launches and interactive moments.

Product storytelling

Give launches, collections and hero moments a visual language that belongs to the product.

Interface atmosphere

Build depth and material character into dashboards, portfolios and spatial interfaces.

Interactive moments

Use pointer-aware motion where interaction should feel tactile, responsive and memorable.

LIVEMARK · LOGO ANIMATION · PRO

Your logo, alive.

Logo animation for your website: drop in an SVG or PNG and Livemark draws it 24 ways, from pixel tiles and liquid metal to neon, crystal and stained glass, with eight ways to answer the pointer. Your logo is prepared in your browser and never uploaded.

Try every effect on the sample mark. Your own logo, the full controls and the exports for React, Next.js, Vue, Nuxt, HTML, WordPress and Framer come with Aperveil Shaders or Aperveil Pro.

Liquid Metal, 1 of 24

FAQ

Questions about shader backgrounds.

A curated collection of WebGPU shaders for interfaces: animated backgrounds, materials and interactive surfaces, and page sections built on them. You tune each one live in the browser, then take it into your project with your settings, every control as a prop and its performance measured.

React (Next.js App and Pages Router included), Vue (Nuxt included), plain HTML as a custom element, and WordPress as a plugin with a block and a shortcode: one source, the same props everywhere. Framer takes each shader and block as a code component, set in its property panel. With server rendering they need no client-only wrapper. On other stacks, such as Svelte, the HTML element works, and the raw WGSL is there for your own WebGPU host.

Tune the shader, open Install, choose WordPress and download its plugin, then upload it under Plugins, Add New, Upload Plugin. In the editor, add the shader’s block (under Design) and put your heading, text and buttons inside it; in a page builder, use its shortcode. Each shader is its own small plugin, and several can share a page.

Yes, shaders and blocks. Tune a shader or customize a block, open Install, choose Framer and copy its code file. In Framer, paste it into a new code file and drag it onto the page: a shader's Color Looks and controls, or a block's copy, corner and border, are in the property panel, and it publishes with your site. Free shaders and blocks are ready now; Pro ones come with Pro access.

A component (or plugin) for your platform with your settings as its defaults, the WGSL source and the runtime it needs. Simulation and 3D shaders export too; the runtime runs their extra passes.

Yes, with Livemark, logo animation for your site. Upload an SVG, PNG, WebP or JPEG up to 5 MB and it is drawn in 24 effects, from pixel tiles and liquid metal to neon, crystal and stained glass, with eight ways to answer the pointer. It is prepared in your browser and never uploaded; in your project, pass the logo’s URL as the logo prop. Every effect can be tried on the sample mark; your own logo, the full controls and the exports come with Aperveil Shaders or Aperveil Pro.

Partly. Aperveil 1.0 is planned as 43 Free and 52 Pro shaders. Free shaders, block studios and Export Kits are available without an account. Pro items run live as demos; their editing, studios and downloads open in a later release. Purchasing is not open yet.

Yes. Free shaders are planned for personal and commercial interface projects. A paid Individual license is planned for one developer’s personal, client and SaaS interfaces, and a Team license for several developers in one company. Until the final terms are published, the license notices supplied with your downloads apply.

Yes, with a Platform (OEM) license, arranged directly. It is for products whose own users add shaders or blocks, such as site builders, design tools, marketplaces and white-label apps; a standard license excludes reselling, marketplaces, white-label and handing the effects to your users. There is no public enterprise price: tell us about your product on the Enterprise page.

Each shader is measured on the GPU at a documented resolution, and its cost is shown on its page. It stops drawing when it scrolls out of view or its tab is hidden, and holds still for visitors who prefer reduced motion. The numbers are baselines for one device, not a frame-rate guarantee.

In current versions, yes: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out; there, the fallback below takes over.

On this site, the shader’s poster stands in without moving the layout. In your project, give the component a fallback, such as an image; keep important content in HTML rather than in the canvas.

WebGPU is the browser’s modern GPU interface, the successor to WebGL. Its shaders are written in WGSL, it asks less of the driver for each frame, and it adds compute passes, which simulations such as Cymatic Dust use. Rather than promise speed, each shader’s cost is measured and shown on its page.
THE FULL INDEX

95 shader backgrounds,
one index.

Browse all
shaders