Effects
SourceThe webgl backgrounds. Each one starts on demand.
Overview
Four ogl effects under @clear-labs/lens/effects. Deep imports only, so the core stays free of webgl.
Each host is an absolute box that fills its positioned parent. The canvas mounts in an effect, renders at device pixel ratio, pauses off screen and on hidden tabs, and freezes on one frame under prefers-reduced-motion.
The stages below start on a button, so nothing on this page opens a webgl context on load. Move the pointer over a started stage to paint.
BayerBackground
A cursor-painted dither. The trail buffer evaporates each frame and the pointer deposits ink along its path.
import BayerBackground from "@clear-labs/lens/effects/bayer-background";
<BayerBackground ink="#0b16ef" background="transparent" pixelSize={6} />Hex colour of the dots.
Host background. Any css colour, usually transparent.
The dot shape.
Dot size in px.
How many click ripples stay live at once.
Peak coverage of a fully wet trail. 0.55 is a half-tone dither, 1 is solid.
Per-frame trail multiplier. 0.99 fades in about 2s, 0.998 in 14s.
Brush radius in trail-buffer pixels. The buffer caps at 768px.
Per-frame brush strength. Below 1 so strokes build up.
Ease-out exponent on the brush profile. Higher is a wetter halo.
Subtractive floor per frame, so decay reaches zero at 8-bit precision.
Passes through to the canvas host.
BayerMaskedGradient
The same dither over an address gradient. The wallet dialog uses it as a passport backdrop.
import BayerMaskedGradient from "@clear-labs/lens/effects/bayer-masked-gradient";
<BayerMaskedGradient palette={addressPalette} shape="square" pixelSize={4} />Up to four hex stops, an angle, and up to five blobs. An address palette fits.
The dot shape.
Dot size in px.
Host background.
How many click ripples stay live at once.
Passes through to the canvas host.
BayerWordHero
A giant word masked over the dither plus a two-line typewriter. Swap, borrow, and stake reuse it with their own word, ink, and copy. The word only shows from lg up.
import { BayerWordHero } from "@clear-labs/lens/effects/bayer-word-hero";
<BayerWordHero
word="swap"
ink="#0b16ef"
lines={[
[{ text: "Swap your " }, { text: "USDC" }],
[{ text: "for " }, { text: "CCPU" }],
]}
ariaLabel="Swap your USDC for CCPU"
runKey="usdc-ccpu"
wordSize="32vw"
/>The giant lowercase word, rendered as bayer-masked ink.
Hex ink for the dots. The shader parses hex.
Two typewriter lines, each a list of segments. A segment's className is a bridge for the tailwind asset colours.
The accessible name for the whole tagline.
Change it to remount the typewriters and restart the animation.
The word's font-size, a css length. Longer words take a smaller vw.
Dot size in px.
AsciiBackground
The bayer trail mechanics with glyphs instead of dots. A runtime font atlas picks a character per cell by brightness.
import AsciiBackground from "@clear-labs/lens/effects/ascii-background";
<AsciiBackground ink="#165dfc" background="transparent" charSize={14} />Hex colour of the glyphs.
Host background.
Glyphs from empty to full. Cell brightness picks one.
Cell size in px.
The face the glyph atlas is drawn with.
Per-frame trail multiplier. 0.99 fades in about 2s, 0.998 in 14s.
Brush radius in trail-buffer pixels. The buffer caps at 768px.
Per-frame brush strength. Below 1 so strokes build up.
Ease-out exponent on the brush profile. Higher is a wetter halo.
Subtractive floor per frame, so decay reaches zero at 8-bit precision.
Passes through to the canvas host.