CyberGrid
A neon perspective grid stretches toward infinity. Retrofuturism distilled into a single, relentless surface.
Preview
Usage
import { createCyberGrid } from 'syaivo';
const effect = createCyberGrid({
gridColor: '#ff80ff',
backgroundColor: '#001a33',
speed: 1,
floorMode: false,
});
effect.mount(document.getElementById('hero')!);Options
| Option | Type | Default | Description |
|---|---|---|---|
gridColor | string | "#ff80ff" | Grid line color |
backgroundColor | string | "#001a33" | Canvas background |
intensity | number | 1 | Brightness of the grid (0–1) |
anchor | number | -0.5 | Horizontal anchor offset (-1 to 1) |
fov | number | 0.2 | Horizon position (-1 to 1) |
speed | number | 1 | Scroll speed multiplier |
floorMode | boolean | false | Render grid on bottom half only |
lineWidth | number | 1 | Line thickness multiplier |
pixelated | boolean | false | Pixelated retro look |
animated | boolean | true | Enable animation |
respectReducedMotion | boolean | true | Honor prefers-reduced-motion |
Dynamic Updates
effect.update({ speed: 2, intensity: 0.6 });Example
Introducing your product
Build something
people remember
A polished experience starts with the details. Ship interfaces that feel considered from the first pixel.
Get startedDocumentation
Lumina
Soft, diagonal beams of light fade gently across a dark surface, creating a premium, cinematic atmosphere. A subtle grain texture overlays the scene, giving depth and a refined, tactile feel.
Dither
Gradients dissolve through ordered dithering patterns. The raw texture of pixels, elevated into motion.