# runets > Components, springs and WebGL 2 shader effects for React, in TypeScript, by Ziyam Khan. MIT. Source: https://github.com/ziyam-khan/runets. Every entry has a live demo at its page. ## Install ```sh npm i github:ziyam-khan/runets ``` Peer dependencies: react and react-dom 19, motion 12, @base-ui/react, lucide-react. Load the styles once (or bring your own tokens and only kit.css): ```ts import 'runets/styles/theme.css' import 'runets/styles/kit.css' ``` Or copy the files an entry lists into your project, keeping their folders. ## Effects Every effect is one component, ``, placed inside a positioned parent. It draws on WebGL 2, draws a still frame on a software renderer, pauses off screen and settles under reduced motion. Props shared by every effect: - effect (string): The effect’s id, as in its entry’s address. - preset (string): One of its entry’s presets; the first by default. - params (Params): Any parameter from its entry’s parameters, over the preset. - place ('under' | 'over'): Under the parent’s content (fills, halos) or over it (sparkles, glass). Default under. - radius (number): Corner radius in points; the parent’s own border radius by default. - backdrop (string | Paint): What glass and distortion read: an image URL, or a function that paints a canvas the size of the parent. - mask (Paint): An alpha mask for mask glow and text sheen. - hot (boolean): Drives heat: the layer lights in 60 ms and cools over half a second instead of cutting off. - trigger (number): Change it to fire a one-shot now (ping, ripple, burst, shockwave, zap). - wake (number): Change it to redraw for a second when something the layer reads, such as its occluders, moves on its own. - shape ((time, w, h) => Rect): The effect’s shape inside the parent, per frame: a lens that drifts. ## Index ### Motion Springs as duration and bounce, presence that blurs in and out, labels that roll. - [Springs](https://ziyamkhan.com/my-components/springs/): Eight named springs, each a duration and a bounce with SwiftUI’s parameterisation, in enter and exit pairs. Exits settle sooner than entrances. - [Presence](https://ziyamkhan.com/my-components/presence/): Things entering or leaving in place blur in from 96% scale and blur out the same way; one that comes back mid-exit revives from where it is. - [Rolling text](https://ziyamkhan.com/my-components/rolling-text/): A label whose changed characters roll, up as a value rises and down as it falls, while the unchanged ones slide into place and the width springs. - [Motion blur](https://ziyamkhan.com/my-components/motion-blur/): Blur along the direction of travel while something flies, measured from its velocity; at rest it is sharp. ### Text Words that change in place: a terminal that retypes itself, labels that swap, a marquee. - [Marquee](https://ziyamkhan.com/my-components/marquee/): A row that slides on a seamless loop at a speed in pixels per second, and holds still under the pointer or focus. - [Word swap](https://ziyamkhan.com/my-components/word-swap/): Words that take turns in one place: the new one drops in out of a blur as the old one sinks away. Pure CSS transitions. - [Terminal](https://ziyamkhan.com/my-components/terminal/): Prompt lines that retype their own words while a block cursor smears from line to line, like smear-cursor in Neovim. ### Effects Light and distortion as layers beside an element: glow, pulses, electricity, fire, glass, CRT. - [Glow](https://ziyamkhan.com/my-components/glow/): Bloom around a shape: a soft breathing halo, neon that cools instead of cutting off, a spectrum flowing round the border, or text bloom from a mask. - [Pulse](https://ziyamkhan.com/my-components/pulse/): Light that beats: radar rings, a breathing halo, a heartbeat whose earlier rings keep fading under the new one, a ping that winds up, lands and cools, and a tap ripple. - [Electricity](https://ziyamkhan.com/my-components/electricity/): Lightning that strikes, holds and re-strikes down the same channel: an arc between two points with forks that shoot out and cool, a current round a border, or a calm charged hairline for UI. - [Fire](https://ziyamkhan.com/my-components/fire/): Flames off a top edge with embers that are flung up, slow to a buoyant drift and cool from white to red; plasma hugging a border; or a little heat for a button. - [Heat haze](https://ziyamkhan.com/my-components/heat-haze/): Hot air rising off an edge: the backdrop wobbles in a column above it, strongest a little up where the air has risen. - [Shockwave](https://ziyamkhan.com/my-components/shockwave/): A ring of displaced light expanding from a point, with a little chromatic split on its front. A one-shot. - [Liquid glass](https://ziyamkhan.com/my-components/lens/): Glass that bends what is behind it: the rim squeezes the page, the middle stays sharp and colour splits only at the edge. Two lenses melt together like liquid. - [CRT](https://ziyamkhan.com/my-components/crt/): An old tube: the picture bulges, scanlines and an aperture grille cross it, a roll bar drifts down and colour bleeds sideways. - [Chromatic split](https://ziyamkhan.com/my-components/chroma-split/): Red and blue pulled apart from green, with optional glitch slices that jump sideways a few frames at a time. - [Shimmer](https://ziyamkhan.com/my-components/shimmer/): A band of light sweeping across a shape: a skeleton shimmer while content loads, or a sheen across text that is still thinking. Under reduced motion the surface breathes instead. - [Sparkles](https://ziyamkhan.com/my-components/sparkles/): Four-point stars round a shape, each with its own size, twinkle and spin, taking turns. A burst pops every star once and flings it out a little. - [Aurora](https://ziyamkhan.com/my-components/aurora/): Three curtains of light with bright lower hems, swaying across a surface. Their heights and warps are a CPU table per frame; the rays are noise per pixel. - [Grain](https://ziyamkhan.com/my-components/grain/): Film grain: triangular noise per pixel that lightens and darkens, static or redrawn a few times a second. - [Spotlight mark](https://ziyamkhan.com/my-components/spotlight-mark/): A stroked logo lit by a light that follows the pointer across it on a spring. ### Fills Surfaces painted by a shader: metal, gradients, dither, glass, blobs, cells, waves, print, plastic. - [Liquid metal](https://ziyamkhan.com/my-components/liquid-metal/): A polished conductor in a photo studio: a domed slab whose surface flows and pools, Fresnel to white at grazing angles, a little thin-film colour where it bends hardest. - [Mesh gradient](https://ziyamkhan.com/my-components/mesh-gradient/): Up to six colours, each owning a point that wanders; Shepard weights blend them in OKLab, so the middle never turns muddy. - [Dither](https://ziyamkhan.com/my-components/dither/): Ordered dithering of a tone into a palette: Bayer matrices, a blue-noise tile built by void-and-cluster, or white noise, over a ramp, a radial, drifting noise or the backdrop. - [Grain gradient](https://ziyamkhan.com/my-components/grain-gradient/): A linear, radial or conic ramp whose position is scattered by triangular noise, so the colours stipple into each other like risograph ink. - [Fluted glass](https://ziyamkhan.com/my-components/fluted-glass/): Reeded glass: every rib is a cylindrical lens that returns the strip under it squeezed and flipped, with a sheen down the lit side and a shaded groove. - [Metaballs](https://ziyamkhan.com/my-components/metaballs/): Glossy blobs that drift and melt into each other where their fields add past the surface, each carrying its colour into the merge. - [Swirl](https://ziyamkhan.com/my-components/swirl/): Ink folding into itself: noise twisted round the centre and warped by more noise, read through a colour ramp. - [Voronoi](https://ziyamkhan.com/my-components/voronoi/): Cells whose seed points orbit their own spots, with exact seams to every neighbour and a little depth toward each cell centre. - [Waves](https://ziyamkhan.com/my-components/waves/): Bands of colour stacked like a coastline or a dune field, each front shading the band behind it just above its crest. - [Halftone](https://ziyamkhan.com/my-components/halftone/): A print screen: dots on a rotated grid sized by tone, merging across cell lines where the ink is heavy. - [Plastic](https://ziyamkhan.com/my-components/plastic/): A keycap under one soft light: the diffuse base keeps its colour, a GGX highlight widened by the size of the light, and a faint sky at grazing angles. ### Weather The four skies of the home page, and sakura petals on the wind of your pointer. - [Rain](https://ziyamkhan.com/my-components/rain/): Three depths of slanted streaks that catch the light behind them, splashes on the wet ground, and drops sliding down the glass in surges, each a tiny fisheye showing the scene upside down. - [Snow](https://ziyamkhan.com/my-components/snow/): Four depths of flakes on the wind: fine far flakes, nearer ones that sway, and big out-of-focus bokeh flakes close to the glass; snow lifting off the ground; frost creeping in from the corners. - [Shooting stars](https://ziyamkhan.com/my-components/meteors/): Stars that scintillate, and meteors in staggered slots: one crosses soon after the scene arrives, trails grow and taper, the odd fireball lights the sky. The land hides anything behind it. - [Sandstorm](https://ziyamkhan.com/my-components/sandstorm/): A storm wall rolling along the horizon behind the dunes, its billows domain-warped and torn at the top, with dust gusts and grains streaming past in front. - [Petal wind](https://ziyamkhan.com/my-components/petal-wind/): Sakura petals that tumble and flip as they fall. Move the pointer and the air moves with it, then settles. ### Light A lamp above the page: soft shadows and rim light from raised elements. - [Light](https://ziyamkhan.com/my-components/light/): A lamp above the page: raised elements cast soft shadows whose penumbra widens with distance, their bevels catch the light, and the rest of the page falls into shade. ### Controls Buttons, toggles and small indicators, in every variant, size and state. - [Button](https://ziyamkhan.com/my-components/button/): Ten variants in three sizes and five states. A rolling label springs the width as it changes. - [Icon button](https://ziyamkhan.com/my-components/icon-button/): A square button whose name comes from its label or its help text. - [Switch](https://ziyamkhan.com/my-components/switch/): Compact and standard. The knob travels on a snappy spring; the track fills with the accent. - [Checkbox](https://ziyamkhan.com/my-components/checkbox/): Checked, unchecked and mixed, with the tick drawn on as it checks. - [Radio group](https://ziyamkhan.com/my-components/radio-group/): One of a few, arrow keys move the choice. - [Segmented control](https://ziyamkhan.com/my-components/segmented-control/): A pill that slides to the chosen segment, its width leading its position. - [Badge](https://ziyamkhan.com/my-components/badge/): A small label for status and counts: neutral, accent, success, warning, danger. - [Keybind](https://ziyamkhan.com/my-components/keybind/): Keys as keycaps, in the platform’s order. - [Spinner and loader](https://ziyamkhan.com/my-components/spinner/): A ring that spins and three dots that wait their turn. - [Progress](https://ziyamkhan.com/my-components/progress/): A bar and a circle that spring to each new value and read their percentage aloud. - [Copy button](https://ziyamkhan.com/my-components/copy-button/): Copies text and answers with a tick, or a cross if the browser refused, then turns back. It never changes size. - [Filter keys](https://ziyamkhan.com/my-components/filter-keys/): Raised keys, one down at a time, each with its count; a press squashes the key, and the result count rolls. ### Inputs Text, choices and shortcuts. - [Text field](https://ziyamkhan.com/my-components/text-field/): Input and text area inside a field with its label, description and error, all wired for assistive tech. - [Select](https://ziyamkhan.com/my-components/select/): A list of options in a popover anchored to its trigger, grouped, with the chosen one checked. - [Combobox](https://ziyamkhan.com/my-components/combobox/): Type to filter, arrows to move, Enter to choose; the list’s height springs as it filters. - [Shortcut recorder](https://ziyamkhan.com/my-components/shortcut-recorder/): Press a combination and it is recorded as keycaps. - [Elastic slider](https://ziyamkhan.com/my-components/elastic-slider/): A native range input with give: drag past an end and the track stretches toward you, then springs back. ### Navigation Ways through a page or a site: signposts, outlines and rails. - [Outline](https://ziyamkhan.com/my-components/outline/): Links to the sections of a page, indented by depth, with a mark on the one you are reading. Compact shows ticks. - [Signpost](https://ziyamkhan.com/my-components/signpost/): Wooden signs on a picture, each a toggle: boards on a pole, arrows to either side, an effect on the chosen one and a sheen on the rest. ### Overlays Menus, popovers, tooltips, cards on hover, dialogs and toasts. - [Menu](https://ziyamkhan.com/my-components/menu/): Items, checkbox and radio items, a submenu and shortcuts, opening out of its button. - [Popover](https://ziyamkhan.com/my-components/popover/): A surface anchored to its trigger that flips and shifts to stay in the window. - [Tooltip](https://ziyamkhan.com/my-components/tooltip/): Help that waits a moment on hover and describes its control. - [Hover card](https://ziyamkhan.com/my-components/hover-card/): A preview that rests on hover before it opens. - [Dialog](https://ziyamkhan.com/my-components/dialog/): A modal that grows out of its button, traps focus and gives it back. - [Toast](https://ziyamkhan.com/my-components/toast/): Messages that queue, stack and swipe away, announced politely. - [Share menu](https://ziyamkhan.com/my-components/share-menu/): Copy the link, share through the device's own sheet, or open any link you give it. A details element: works without script. - [Brand menu](https://ziyamkhan.com/my-components/brand-menu/): Right-click a logo and, instead of the browser's menu, a dialog offers the brand's own actions. ### Surfaces Cards, lists, disclosure and the app shell. - [Card](https://ziyamkhan.com/my-components/card/): A raised surface: neutral, info, warning and error. - [List](https://ziyamkhan.com/my-components/list/): Rows with a selection that springs between them and arrow-key navigation. - [Accordion](https://ziyamkhan.com/my-components/accordion/): Sections that open one at a time, the chevron springing as they do. - [Collapsible](https://ziyamkhan.com/my-components/collapsible/): One region that opens and closes on the disclosure spring. - [Shell](https://ziyamkhan.com/my-components/shell/): A sidebar that resizes, collapses on a spring and peeks back when the pointer rests on the edge. - [Spotlight](https://ziyamkhan.com/my-components/spotlight/): A surface with a soft light that follows the pointer while it is over it, written to CSS variables, not React state. - [Scroll fade](https://ziyamkhan.com/my-components/scroll-fade/): A scroll box whose edges fade only where there is more to scroll, and stay crisp at either end. ### Content The pieces a portfolio is made of: shelves, timelines, cards and quotes. - [Testimonial](https://ziyamkhan.com/my-components/testimonial/): A quote and who said it, with a picture or their initials: a figure, a blockquote and a caption. - [Timeline](https://ziyamkhan.com/my-components/timeline/): Work and study in groups, each under its own colour: where on the left, what and when on the right. Server-rendered. - [Heat card](https://ziyamkhan.com/my-components/heat-card/): A card that warms while you look at it, pointer or keyboard, and cools slowly when you leave instead of switching off. - [Badge groups](https://ziyamkhan.com/my-components/badge-groups/): Labelled groups of badges in one panel, flowing into as many columns as fit. Renders on the server: no JavaScript. - [Article list](https://ziyamkhan.com/my-components/article-list/): A row per article: date and tag on the left, title and a line on the right. Drafts are marked for the build to catch. - [Bookshelf](https://ziyamkhan.com/my-components/bookshelf/): Books stand spine out. The one you open turns on its spine to show its cover, and its neighbours slide aside by exactly the space it takes. ### Data A virtual file tree, a sortable table, a lineage drawn as a tree and a year of activity as squares. - [Tree](https://ziyamkhan.com/my-components/tree/): A file tree: folders before files, natural order, a cursor the arrow keys move, chains of single folders shown as one row. - [Table](https://ziyamkhan.com/my-components/table/): Sortable columns, a cursor row, zebra stripes and figures that line up. - [Network map](https://ziyamkhan.com/my-components/network-map/): A hub joined to its nodes; done nodes fill in and their links go solid, the rest stay hollow and dashed. - [Lineage tree](https://ziyamkhan.com/my-components/lineage-tree/): Which work builds on which: a tier per generation, elbow wires that draw in, one focal node. - [Contribution graph](https://ziyamkhan.com/my-components/contribution-graph/): A year of daily counts as squares, a column per week, busier days in stronger accent. Drawn on the server; a tip reads out each day. ### Play Small toys: things to drag, slide and break. - [Slide to unlock](https://ziyamkhan.com/my-components/slide-to-unlock/): Drag the handle to the end, or use the arrow keys, and the action fires; let go early and it springs back. - [Brick breaker](https://ziyamkhan.com/my-components/brick-breaker/): A small brick breaker on a canvas, in the theme's colours: pointer or arrow keys, Space to launch. ## Entries ### Springs https://ziyamkhan.com/my-components/springs/ Eight named springs, each a duration and a bounce with SwiftUI’s parameterisation, in enter and exit pairs. Exits settle sooner than entrances. Features: - Eight named springs as (duration, bounce), with SwiftUI’s parameterisation: ω = 2π / duration, ζ = 1 − bounce. - Each has an exit that settles sooner than its entrance. - Also as CSS linear() curves for transitions. ```tsx import { snappy, spring } from 'runets' ``` Files: src/motion.ts Uses: motion Accessibility: - Pair with reduced motion: swap travel for a short fade (reducedFade). ### Presence https://ziyamkhan.com/my-components/presence/ Things entering or leaving in place blur in from 96% scale and blur out the same way; one that comes back mid-exit revives from where it is. Features: - Enters from 4 px of blur at 96% scale, leaves the same way. - Revives mid-exit from where it is. ```tsx import { blurReplace } from 'runets' {open && } ``` Files: src/motion.ts Uses: motion Accessibility: - Reduced motion keeps only the fade. ### Rolling text https://ziyamkhan.com/my-components/rolling-text/ A label whose changed characters roll, up as a value rises and down as it falls, while the unchanged ones slide into place and the width springs. Features: - Unchanged characters keep their key and slide; changed ones roll out one edge and in the other. - Direction from the value: up as it rises, down as it falls. - A 0.03 s stagger per changed glyph, capped at six; the width springs. ```tsx import { RollingText } from 'runets' ``` Props: - text (string): The label. - value (number): Optional value that picks the roll direction. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, motion Accessibility: - The whole text is the accessible label; the moving glyphs are hidden. - Reduced motion crossfades. ### Motion blur https://ziyamkhan.com/my-components/motion-blur/ Blur along the direction of travel while something flies, measured from its velocity; at rest it is sharp. Features: - Blur along the direction of travel, from the measured velocity, capped. - Sharp the moment it stops. ```tsx import { MotionBlur } from 'runets' const vx = useVelocity(x) // blur along the travel: stdDeviation = speed / 140, capped at 18 px ``` Props: - perPx (number): Pixels per second per pixel of blur (140). - max (number): Largest blur in pixels (18). - …MotionProps (): drag, transitions and the rest of motion’s props. Files: src/kit/motion-blur.tsx Uses: react, motion Accessibility: - Nothing to announce; with reduced motion, avoid flinging. ### Glow https://ziyamkhan.com/my-components/glow/ Bloom around a shape: a soft breathing halo, neon that cools instead of cutting off, a spectrum flowing round the border, or text bloom from a mask. Features: - Soft, neon, aura (a spectrum flowing round the border) and mask (text bloom) styles. - Heat: neon cools and deepens instead of switching off. - Breathing on a continuous phase, so speed changes never jump. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Soft, Neon, Aura, Hot core Parameters: - style (Style): soft, neon, aura; default soft - color (Colour): color; default 0x7c5cff - core (Hot core): color; default 0xf4f0ff - third (Third): color; default 0x22d3ee - radius (Radius): 1 to 64; default 14 - intensity (Intensity): 0 to 3; default 1 - inner (Inner): 0 to 1; default 0 - occlusion (Occlusion): 0 to 1; default 0.15 - breathe (Breathe): 0 to 1; default 0.6 - breathePeriod (Breathe period): 0.4 to 8; default 2.6 - heat (Heat): 0 to 1; default 1 - hot (Hot): 0 to 1; default 0.6 - auraSpeed (Aura speed): 0 to 1; default 0.12 - rimWidth (Rim width): 0.2 to 3; default 0.6 - reach (Reach): 2 to 8; default 4.5 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Pulse https://ziyamkhan.com/my-components/pulse/ Light that beats: radar rings, a breathing halo, a heartbeat whose earlier rings keep fading under the new one, a ping that winds up, lands and cools, and a tap ripple. Features: - Radar rings, a breathing halo and a heartbeat whose old rings fade under the new. - A ping that winds up, lands with zero velocity and cools. - A tap ripple clipped to the shape. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Radar, Breathe, Heartbeat, Ping Parameters: - style (Style): radar, breathe, heartbeat, ping, ripple; default radar - color (Colour): color; default 0xef4444 - core (Core): color; default 0xffe4e4 - count (Rings): 1 to 6; default 3 - period (Period): 0.3 to 6; default 2.4 - reach (Reach): 4 to 200; default 36 - width (Width): 0.3 to 8; default 1.6 - intensity (Intensity): 0 to 3; default 1 - dur (Duration): 0.1 to 3; default 0.75 - repeat (Repeat): 0 to 6; default 0 - lag (Lag): 0.02 to 0.5; default 0.16 - headRadius (Head radius): 0.5 to 12; default 2.6 - travel (Travel): 20 to 600; default 160 - occlusion (Occlusion): 0 to 1; default 0.15 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Electricity https://ziyamkhan.com/my-components/electricity/ Lightning that strikes, holds and re-strikes down the same channel: an arc between two points with forks that shoot out and cool, a current round a border, or a calm charged hairline for UI. Features: - Fractal bolts that strike, hold and re-strike down the same channel. - Forks that shoot out, cool from white to violet and die. - A calm charged hairline for UI that should stay readable. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Border current, Charged, Arc Parameters: - style (Style): border, charged, arc; default border - color (Glow): color; default 0x4f8dff - core (Core): color; default 0xeaf3ff - cool (Cooled fork): color; default 0x7a4dff - amplitude (Amplitude): 0 to 24; default 5 - frequency (Frequency): 0.5 to 8; default 2.4 - speed (Speed): 0 to 10; default 3.2 - coreWidth (Core width): 0.2 to 3; default 0.6 - intensity (Intensity): 0 to 3; default 1 - glow (Glow): 1 to 20; default 5 - forks (Forks): 0 to 1; default 0.55 - flicker (Flicker): 0 to 1; default 0.45 - strands (Strands): 1 to 3; default 2 - gap (Gap): -6 to 12; default 2 - forkLen (Fork length): 2 to 60; default 20 - occlusion (Occlusion): 0 to 1; default 0.12 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Fire https://ziyamkhan.com/my-components/fire/ Flames off a top edge with embers that are flung up, slow to a buoyant drift and cool from white to red; plasma hugging a border; or a little heat for a button. Features: - Domain-warped flames off a top edge, hottest at the base. - Embers flung up, slowed by drag into a buoyant drift, cooling white to red. - Plasma hugging a border, and a small heat preset for buttons. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Flames, Heat, Plasma Parameters: - style (Style): top, heat, border, embers; default top - low (Low): color; default 0x8a1405 - mid (Mid): color; default 0xff5a14 - hot (Hot): color; default 0xffc65a - height (Height): 4 to 160; default 54 - scale (Scale): 4 to 80; default 20 - speed (Speed): 0 to 5; default 1.5 - intensity (Intensity): 0 to 3; default 1 - embers (Embers): 0 to 40; default 16 - emberRise (Ember rise): 0 to 200; default 58 - emberSize (Ember size): 0.2 to 3; default 0.8 - emberLife (Ember life): 0.2 to 4; default 1.5 - warp (Warp): 0 to 3; default 1 - sides (Sides): 0 to 1; default 0.32 - baseGlow (Base glow): 0 to 2; default 0.5 - swirl (Swirl): 0 to 3; default 0 - occlusion (Occlusion): 0 to 1; default 0.25 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Heat haze https://ziyamkhan.com/my-components/heat-haze/ Hot air rising off an edge: the backdrop wobbles in a column above it, strongest a little up where the air has risen. Features: - The backdrop wobbles in a column above an edge, strongest where hot air has risen. - Or the whole shape, with the whole-shape switch. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - height (Height): 4 to 160; default 34 - scale (Scale): 4 to 60; default 14 - speed (Speed): 0 to 5; default 1.4 - amount (Amount): 0 to 12; default 2.6 - wholeShape (Whole shape): toggle; default false Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Shockwave https://ziyamkhan.com/my-components/shockwave/ A ring of displaced light expanding from a point, with a little chromatic split on its front. A one-shot. Features: - A ring of displaced pixels with a chromatic split on its front. - Highlights only where there is content, so empty space gets no grey donut. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - reach (Reach): 20 to 400; default 160 - width (Width): 2 to 40; default 14 - amount (Amount): 0 to 30; default 9 - chroma (Chroma): 0 to 1; default 0.35 - dur (Duration): 0.2 to 3; default 0.9 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Liquid glass https://ziyamkhan.com/my-components/lens/ Glass that bends what is behind it: the rim squeezes the page, the middle stays sharp and colour splits only at the edge. Two lenses melt together like liquid. Features: - The rim squeezes the page, the middle stays sharp, colour splits only at the edge. - Two lenses melt together with a smooth union. - Optional frost reads a blurred copy of the backdrop. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - bevel (Bevel): 1 to 40; default 14 - depth (Depth): 0 to 40; default 16 - dispersion (Dispersion): 0 to 0.6; default 0.14 - magnification (Magnification): 0.8 to 1.4; default 1.04 - presence (Presence): 0 to 1; default 1 - frost (Frost): 0 to 1; default 0 - shadow (Shadow): 0 to 1; default 0.35 - rim (Rim): 0 to 3; default 1.6 - lightAngle (Light angle): -3.141592653589793 to 3.141592653589793; default -2.09 - tint (Tint): color; default 0xffffff - tintAmount (Tint amount): 0 to 1; default 0 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### CRT https://ziyamkhan.com/my-components/crt/ An old tube: the picture bulges, scanlines and an aperture grille cross it, a roll bar drifts down and colour bleeds sideways. Features: - Barrel bulge, scanlines, an aperture grille, a drifting roll bar and colour bleed. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - bulge (Bulge): 0 to 0.4; default 0.08 - scanline (Scanline): 1 to 6; default 1.5 - scanDepth (Scan depth): 0 to 1; default 0.28 - chroma (Chroma): 0 to 4; default 0.8 - vignette (Vignette): 0 to 1.5; default 0.6 - glow (Glow): 0 to 1.5; default 0.35 - roll (Roll): 0 to 3; default 1 - feather (Feather): 0 to 12; default 2 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Chromatic split https://ziyamkhan.com/my-components/chroma-split/ Red and blue pulled apart from green, with optional glitch slices that jump sideways a few frames at a time. Features: - Red and blue pulled apart from green. - Glitch slices that jump sideways a few frames at a time. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - glitch (Glitch): 0 to 2; default 0.6 - feather (Feather): 0 to 12; default 2 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Shimmer https://ziyamkhan.com/my-components/shimmer/ A band of light sweeping across a shape: a skeleton shimmer while content loads, or a sheen across text that is still thinking. Under reduced motion the surface breathes instead. Features: - A sweeping band with a pause between sweeps. - Over a shape (skeleton) or through a text mask (sheen). ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Skeleton, Text sheen Parameters: - color (Sheen): color; default 0xffffff - base (Base): color; default 0x1c1f26 - baseAlpha (Base alpha): 0 to 1; default 0 - period (Period): 0.4 to 6; default 1.8 - band (Band): 4 to 120; default 28 - angle (Angle): -1.2 to 1.2; default 0.35 - intensity (Intensity): 0 to 1.5; default 0.16 - pause (Pause): 0 to 0.9; default 0.3 - feather (Feather): 0 to 12; default 0 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Sparkles https://ziyamkhan.com/my-components/sparkles/ Four-point stars round a shape, each with its own size, twinkle and spin, taking turns. A burst pops every star once and flings it out a little. Features: - Four-point stars, each with its own size, twinkle and spin, taking turns. - A burst that pops every star once and flings it out. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Twinkle, Burst Parameters: - color (Colour): color; default 0xffe6a8 - count (Count): 1 to 64; default 6 - life (Life): 0.3 to 4; default 1.5 - size (Size): 2 to 20; default 7 - intensity (Intensity): 0 to 2; default 1 - margin (Margin): 0 to 40; default 10 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Aurora https://ziyamkhan.com/my-components/aurora/ Three curtains of light with bright lower hems, swaying across a surface. Their heights and warps are a CPU table per frame; the rays are noise per pixel. Features: - Three curtains with bright lower hems; heights and warps are a CPU table, rays per pixel. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Polar, Ember Parameters: - a (First): color; default 0x16c79a - b (Second): color; default 0x3b6cff - c (Third): color; default 0xa23bff - scale (Scale): 20 to 400; default 120 - speed (Speed): 0 to 2; default 0.25 - intensity (Intensity): 0 to 1.5; default 0.5 - feather (Feather): 0 to 120; default 40 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Grain https://ziyamkhan.com/my-components/grain/ Film grain: triangular noise per pixel that lightens and darkens, static or redrawn a few times a second. Features: - Triangular noise that lightens and darkens, static or redrawn a few times a second. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Static, Film Parameters: - amount (Amount): 0 to 0.3; default 0.05 - fps (Rate): 0 to 30; default 0 - feather (Feather): 0 to 40; default 0 Files: src/fx/glsl/emit.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Liquid metal https://ziyamkhan.com/my-components/liquid-metal/ A polished conductor in a photo studio: a domed slab whose surface flows and pools, Fresnel to white at grazing angles, a little thin-film colour where it bends hardest. Features: - A domed slab or a tube border reflecting a photo studio. - Flowing, pooling surface; Fresnel to white at grazing angles. - Chrome, gold, rose gold and gunmetal presets. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Chrome, Gold, Rose gold, Gunmetal Parameters: - tint (Tint): color; default 0xe9ecf0 - light (Light): color; default 0xffffff - flow (Flow): 0 to 1.5; default 0.6 - scale (Scale): 16 to 480; default 100 - speed (Speed): 0 to 2; default 0.35 - bevel (Bevel): 0 to 48; default 14 - dome (Dome): 0 to 1; default 0.55 - angle (Angle): -3.141592653589793 to 3.141592653589793; default -0.12 - iridescence (Iridescence): 0 to 1; default 0.08 - contrast (Contrast): 0.5 to 2; default 1 - anchor (Anchor): world, element; default world - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Mesh gradient https://ziyamkhan.com/my-components/mesh-gradient/ Up to six colours, each owning a point that wanders; Shepard weights blend them in OKLab, so the middle never turns muddy. Features: - Up to six colours, each owning a wandering point, blended in OKLab. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Dusk, Lagoon, Orchid, Graphite Parameters: - colors (Colours): colors; default 5 colours - drift (Drift): 0 to 0.4; default 0.12 - speed (Speed): 0 to 2; default 0.25 - sharpness (Sharpness): 0.5 to 4; default 1.6 - warp (Warp): 0 to 1; default 0.35 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Dither https://ziyamkhan.com/my-components/dither/ Ordered dithering of a tone into a palette: Bayer matrices, a blue-noise tile built by void-and-cluster, or white noise, over a ramp, a radial, drifting noise or the backdrop. Features: - Bayer 2, 4 and 8, a void-and-cluster blue-noise tile, white noise. - Inputs: a ramp, a radial, drifting noise or the backdrop. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Bayer, Handheld, Blue noise, Backdrop Parameters: - pattern (Pattern): bayer2, bayer4, bayer8, blue, white; default bayer4 - input (Input): linear, radial, noise, backdrop; default linear - colors (Colours): colors; default 2 colours - pixel (Pixel): 0.5 to 16; default 2 - angle (Angle): -3.141592653589793 to 3.141592653589793; default 0.6 - scale (Noise scale): 8 to 400; default 90 - speed (Speed): 0 to 2; default 0.2 - bias (Bias): -1 to 1; default 0 - contrast (Contrast): 0.2 to 4; default 1 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Grain gradient https://ziyamkhan.com/my-components/grain-gradient/ A linear, radial or conic ramp whose position is scattered by triangular noise, so the colours stipple into each other like risograph ink. Features: - Linear, radial and conic ramps scattered by triangular noise. - Mono or colour grain, static or animated. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Ember, Halo, Sweep Parameters: - kind (Kind): linear, radial, conic; default linear - colors (Colours): colors; default 4 colours - angle (Angle): -3.141592653589793 to 3.141592653589793; default 1.2 - amount (Grain): 0 to 1; default 0.4 - size (Grain size): 0.5 to 8; default 0.5 - mono (Mono): toggle; default true - fps (Grain rate): 0 to 30; default 12 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Fluted glass https://ziyamkhan.com/my-components/fluted-glass/ Reeded glass: every rib is a cylindrical lens that returns the strip under it squeezed and flipped, with a sheen down the lit side and a shaded groove. Features: - Every rib is a cylindrical lens: the strip under it comes back squeezed and flipped. - Sheen down each rib, shaded grooves, optional frost and tint. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Reeded, Fine, Frosted, Wide Parameters: - rib (Rib width): 2 to 64; default 14 - angle (Angle): -3.141592653589793 to 3.141592653589793; default 0 - refraction (Refraction): 0 to 40; default 9 - frost (Frost): 0 to 1; default 0 - dispersion (Dispersion): 0 to 1; default 0.15 - highlight (Highlight): 0 to 1; default 0.5 - tint (Tint): color; default 0xffffff - tintAmount (Tint amount): 0 to 1; default 0 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Metaballs https://ziyamkhan.com/my-components/metaballs/ Glossy blobs that drift and melt into each other where their fields add past the surface, each carrying its colour into the merge. Features: - Blobs that drift and merge where their fields add past the surface, carrying their colours. - A glossy body lit from the top left. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Lava, Mint Parameters: - colors (Colours): colors; default 3 colours - base (Base): color; default 0x1a0f1f - count (Count): 1 to 8; default 6 - size (Size): 0.05 to 0.5; default 0.2 - speed (Speed): 0 to 2; default 0.4 - gloss (Gloss): 0 to 1; default 0.5 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Swirl https://ziyamkhan.com/my-components/swirl/ Ink folding into itself: noise twisted round the centre and warped by more noise, read through a colour ramp. Features: - Noise twisted round the centre and warped by more noise, through a colour ramp. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Ink, Marble Parameters: - colors (Colours): colors; default 4 colours - scale (Scale): 16 to 480; default 140 - speed (Speed): 0 to 2; default 0.2 - twist (Twist): -2 to 2; default 0.6 - warp (Warp): 0 to 2.5; default 1 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Voronoi https://ziyamkhan.com/my-components/voronoi/ Cells whose seed points orbit their own spots, with exact seams to every neighbour and a little depth toward each cell centre. Features: - Seed points orbiting their own spots, exact seams to every neighbour. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Cells, Stained glass Parameters: - colors (Colours): colors; default 4 colours - seam (Seam colour): color; default 0x0b0f1a - scale (Cell size): 6 to 200; default 36 - speed (Speed): 0 to 2; default 0.25 - edge (Seam): 0 to 8; default 1.5 - depth (Depth): 0 to 1; default 0.4 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Waves https://ziyamkhan.com/my-components/waves/ Bands of colour stacked like a coastline or a dune field, each front shading the band behind it just above its crest. Features: - Bands stacked like a coastline or dunes, each front shading the band behind it. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Sea, Dunes Parameters: - colors (Colours): colors; default 5 colours - amplitude (Amplitude): 0 to 0.25; default 0.05 - frequency (Frequency): 0.2 to 6; default 1.6 - speed (Speed): 0 to 2; default 0.4 - angle (Angle): -3.141592653589793 to 3.141592653589793; default 0 - softness (Softness): 0 to 0.1; default 0.006 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Halftone https://ziyamkhan.com/my-components/halftone/ A print screen: dots on a rotated grid sized by tone, merging across cell lines where the ink is heavy. Features: - Dots on a rotated screen sized by tone, merging where the ink is heavy. - Inputs: ramp, radial, noise or the backdrop. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Print, Backdrop Parameters: - input (Input): linear, radial, noise, backdrop; default radial - ink (Ink): color; default 0x1b1b1f - base (Base): color; default 0xf1ece1 - cell (Dot pitch): 2 to 32; default 6 - angle (Screen angle): -3.141592653589793 to 3.141592653589793; default 0.785 - rampAngle (Ramp angle): -3.141592653589793 to 3.141592653589793; default 0.6 - scale (Noise scale): 8 to 400; default 90 - speed (Speed): 0 to 2; default 0.2 - bias (Bias): -1 to 1; default 0 - contrast (Contrast): 0.2 to 4; default 1 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Plastic https://ziyamkhan.com/my-components/plastic/ A keycap under one soft light: the diffuse base keeps its colour, a GGX highlight widened by the size of the light, and a faint sky at grazing angles. Features: - A dielectric under one soft light: GGX highlight widened by the light’s size, a faint sky at grazing angles. - Glossy, matte and dished presets. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Glossy, Matte, Dished Parameters: - color (Colour): color; default 0xece8de - roughness (Roughness): 0.05 to 1; default 0.15 - dome (Dome): -1 to 1; default 0.35 - bevel (Bevel): 0 to 48; default 6 - angle (Light angle): -3.141592653589793 to 3.141592653589793; default -0.5 - border (Border): 0 to 24; default 0 - intensity (Intensity): 0 to 1; default 1 Files: src/fx/glsl/surface.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Rain https://ziyamkhan.com/my-components/rain/ Three depths of slanted streaks that catch the light behind them, splashes on the wet ground, and drops sliding down the glass in surges, each a tiny fisheye showing the scene upside down. Features: - Three depths of slanted streaks that catch the light behind them. - Splashes on the ground line. - Drops sliding down the glass in surges, each a fisheye showing the scene upside down, leaving trails of beads. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - intensity (Intensity): 0 to 2; default 1 - wind (Wind): 0 to 2; default 0.5 - speed (Speed): 0 to 2; default 1 - density (Density): 0 to 2; default 1 - tint (Tint): color; default 0xbfe0ff - lens (Drops on glass): 0 to 1; default 0.55 - ground (Ground line): 0.3 to 1; default 0.8 Files: src/fx/glsl/weather.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Snow https://ziyamkhan.com/my-components/snow/ Four depths of flakes on the wind: fine far flakes, nearer ones that sway, and big out-of-focus bokeh flakes close to the glass; snow lifting off the ground; frost creeping in from the corners. Features: - Four depths of flakes on gusting wind, the nearest as out-of-focus bokeh. - Snow lifting off the ground; frost creeping in from the corners. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - intensity (Intensity): 0 to 2; default 1 - wind (Wind): 0 to 2; default 0.5 - speed (Speed): 0 to 2; default 1 - density (Density): 0 to 2; default 1 - tint (Tint): color; default 0xe8f4ff - ground (Ground line): 0.3 to 1; default 0.72 Files: src/fx/glsl/weather.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Shooting stars https://ziyamkhan.com/my-components/meteors/ Stars that scintillate, and meteors in staggered slots: one crosses soon after the scene arrives, trails grow and taper, the odd fireball lights the sky. The land hides anything behind it. Features: - Scintillating stars and meteors in staggered slots, the odd fireball lighting the sky. - A skyline keeps them behind the land. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - intensity (Intensity): 0 to 2; default 1 - wind (Wind): 0 to 2; default 0.5 - speed (Speed): 0 to 2; default 1 - density (Density): 0 to 2; default 1 - tint (Tint): color; default 0x7fd7e6 - accent (Fireball): color; default 0xb8fff0 Files: src/fx/glsl/weather.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Sandstorm https://ziyamkhan.com/my-components/sandstorm/ A storm wall rolling along the horizon behind the dunes, its billows domain-warped and torn at the top, with dust gusts and grains streaming past in front. Features: - A storm wall rolling along the horizon behind the land, billows domain-warped and torn at the top. - Dust gusts and streaming grains in front. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Default Parameters: - intensity (Intensity): 0 to 2; default 1 - wind (Wind): 0 to 2; default 0.8 - speed (Speed): 0 to 2; default 1 - density (Density): 0 to 2; default 1 - tint (Tint): color; default 0xd9b98a - accent (Horizon glow): color; default 0xff4d3d Files: src/fx/glsl/weather.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Light https://ziyamkhan.com/my-components/light/ A lamp above the page: raised elements cast soft shadows whose penumbra widens with distance, their bevels catch the light, and the rest of the page falls into shade. Features: - Raised elements cast soft shadows whose penumbra widens with distance, traced through their distance field. - Rim light on the bevels facing the lamp; the lamp can follow the pointer. ```tsx import { Fx } from 'runets'
{/* position: relative */}
``` Presets: Reading lamp, Flashlight Parameters: - color (Colour): color; default 0xffd9a8 - intensity (Intensity): 0 to 5; default 2.2 - ambient (Darkness): 0 to 1; default 0.72 - range (Range): 60 to 900; default 340 - softness (Softness): 0.2 to 3; default 1 - height (Height): 20 to 400; default 120 - size (Source size): 2 to 40; default 14 Files: src/fx/glsl/weather.ts, src/fx/effects.ts, src/fx/engine.ts, src/fx/fx.tsx, src/fx/cpu.ts, src/fx/glsl/common.ts Uses: react Accessibility: - The canvas is aria-hidden and never takes the pointer; the parent keeps its semantics and focus. - Under prefers-reduced-motion every loop settles on one calm pose; one-shots fade in place instead of travelling. - Off screen, in a hidden tab or once settled, the layer draws nothing. - data-motion="off" on the root element is a pause switch for the whole page: every layer rests on that calm pose until it is removed. ### Button https://ziyamkhan.com/my-components/button/ Ten variants in three sizes and five states. A rolling label springs the width as it changes. Features: - Neutral, danger, warning, outline, contrast, submit, accent, ghost, ghost muted, ghost faint and loading. - Small, normal and large. - Hover, pressed, focus and disabled, and a `state` prop to force one for documentation. ```tsx import { Button } from 'runets' ``` Props: - variant (ButtonVariant): Look; neutral by default. - size ('small' | 'normal' | 'large'): Height and type size. - state ('hover' | 'pressed' | 'focus' | 'disabled'): Forces a state. - icon (ReactNode): Leading icon. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion Accessibility: - A native button; Enter and Space press it. - Loading sets aria-busy and shows a spinner. ### Icon button https://ziyamkhan.com/my-components/icon-button/ A square button whose name comes from its label or its help text. Features: - Square, in every button variant and size. ```tsx import { IconButton } from 'runets' ``` Props: - label (string): Its accessible name and tooltip. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion Accessibility: - Named by its label: never an unlabelled icon. ### Switch https://ziyamkhan.com/my-components/switch/ Compact and standard. The knob travels on a snappy spring; the track fills with the accent. Features: - Compact and standard sizes. - The knob widens while pressed and travels on the snap spring. ```tsx import { Switch } from 'runets' ``` Props: - checked (boolean): On or off. - onCheckedChange ((v) => void): Called on toggle. - size ('compact' | 'standard'): Size. - label (string): Visible label. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion, lucide-react Accessibility: - role switch with aria-checked; Space toggles. ### Checkbox https://ziyamkhan.com/my-components/checkbox/ Checked, unchecked and mixed, with the tick drawn on as it checks. Features: - Checked, unchecked and mixed. - The tick draws on as it checks. ```tsx import { Checkbox } from 'runets' ``` Props: - checked (boolean): State. - indeterminate (boolean): Mixed state. - onCheckedChange ((v) => void): Called on change. - label (string): Visible label. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion, lucide-react Accessibility: - Native checkbox semantics, including mixed. ### Radio group https://ziyamkhan.com/my-components/radio-group/ One of a few, arrow keys move the choice. Features: - One choice of a few; the dot pops in on the pop spring. ```tsx import { RadioGroup } from 'runets' ``` Props: - value (string): The chosen option. - onValueChange ((v) => void): Called on change. - options ([id, label][]): The options. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion, lucide-react Accessibility: - Arrow keys move the choice; one Tab stop. ### Segmented control https://ziyamkhan.com/my-components/segmented-control/ A pill that slides to the chosen segment, its width leading its position. Features: - A pill that slides to the chosen segment, its width leading its position. ```tsx import { SegmentedControl } from 'runets' ``` Props: - value (string): Chosen segment. - onValueChange ((v) => void): Called on change. - options ([id, label][]): Segments. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react, motion Accessibility: - role radiogroup; arrow keys move and focus the choice. ### Badge https://ziyamkhan.com/my-components/badge/ A small label for status and counts: neutral, accent, success, warning, danger. Features: - Neutral, accent, success, warning and danger; an optional dot. ```tsx import { Badge } from 'runets' Accepted ``` Props: - tone (string): Colour. - dot (boolean): Leading dot. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react Accessibility: - Plain text; the dot is hidden from assistive tech. ### Keybind https://ziyamkhan.com/my-components/keybind/ Keys as keycaps, in the platform’s order. Features: - Keys as keycaps. ```tsx import { Keybind } from 'runets' ``` Props: - keys (string[]): The keys, in order. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react Accessibility: - Named with its keys as one label. ### Spinner and loader https://ziyamkhan.com/my-components/spinner/ A ring that spins and three dots that wait their turn. Features: - A spinning ring and three waiting dots. ```tsx import { Spinner, Loader } from 'runets' ``` Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react Accessibility: - role status with a Loading label; slower under reduced motion. ### Progress https://ziyamkhan.com/my-components/progress/ A bar and a circle that spring to each new value and read their percentage aloud. Features: - A bar and a circle that spring to each new value. ```tsx import { Progress, ProgressCircle } from 'runets' ``` Props: - value (number): 0 to 100. - label (string): What is progressing. Files: src/kit/controls.tsx, src/motion.ts, styles/kit.css Uses: react Accessibility: - role progressbar with aria-valuenow; reads its percentage. ### Text field https://ziyamkhan.com/my-components/text-field/ Input and text area inside a field with its label, description and error, all wired for assistive tech. Features: - Input or text area with its label, description and error. - Focus ring and invalid state from tokens. ```tsx import { TextField } from 'runets' ``` Props: - label (string): Label. - description (string): Help below. - error (string): Shown and announced when set. - multiline (boolean): Text area. Files: src/kit/inputs.tsx, src/motion.ts, styles/kit.css Uses: react, @base-ui/react, motion, lucide-react Accessibility: - Label, description and error are wired to the control; an error is announced. ### Select https://ziyamkhan.com/my-components/select/ A list of options in a popover anchored to its trigger, grouped, with the chosen one checked. Features: - Options grouped, the chosen one checked, in a popover anchored to the trigger. ```tsx import { Select } from 'runets'