Canonical: https://striktly.com/docs/

# Interactive shader backgrounds for websites

Striktly is a library of interactive WebGL shader backgrounds for websites. Use animated gradients, mouse-reactive particles, glass, liquid metal, ink, wireframes and organic motion in landing-page heroes, feature panels, cards, calls to action or full-page backgrounds. Customize a look in the browser, then export a shader-specific HTML, JavaScript or React kit.

This developer hub is public. You can read integration guides and shader references without an account. Sign in to a verified Striktly account to download code, export images, save configurations, or authorize the MCP connection. Complete membership access is free at launch; optional Yearly and Lifetime support plans do not unlock additional access during this offer.

## Choose a background for your component

- [Prism](/docs/shaders/prism): a soft animated gradient and light sheet for a landing-page hero.
- [Kinetic](/docs/shaders/kinetic): a mouse-reactive dot grid for an interactive panel.
- [Lava](/docs/shaders/lava): luminous blobs that merge and separate across an organic background.
- [Spectral Glass](/docs/shaders/spectral-glass): colored glass panels and drifting highlights.
- [Liquid Chrome](/docs/shaders/liquid-chrome): a flowing liquid-metal surface.
- [Photon Fabric](/docs/shaders/photon-fabric): a folded field of luminous particles.

Browse the [full shader background library](/docs/shaders) for presets, descriptions and supported controls. The live editor lets you preview a configuration before downloading. A static gradient or image is often sufficient when you do not need motion or interaction; WebGL is useful when those behaviors are part of the design.

## Add an animated background with JavaScript

Download the Prism kit first. This example imports its local runtime and its stage CSS; it does not install a package or fetch a renderer from a CDN.

```html
<section class="hero ambient-prism-stage">
  <div id="background" aria-hidden="true"></div>
  <h1>A different feeling.</h1>
</section>
<style>
  .hero { position: relative; isolation: isolate; min-height: 70svh; overflow: hidden; }
  #background { position: absolute; inset: 0; z-index: -1; }
  .hero h1 { position: relative; z-index: 3; padding: 3rem; }
</style>
```

```javascript
import { createBackground, PRISM_STAGE_CSS } from './shader-background.js';

const stageStyle = document.createElement('style');
stageStyle.textContent = PRISM_STAGE_CSS;
document.head.append(stageStyle);

const background = createBackground(document.querySelector('#background'), {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  speed: 0.4,
  maxPixels: 700000,
  maxFPS: 30,
});

// When your router or component removes this view:
// background.destroy();
// stageStyle.remove();
```

For mouse input, configuration updates and teardown, use the [JavaScript integration guide](/docs/javascript). For a component-based app, use the [React background component](/docs/react) or the [Next.js client-component guide](/docs/nextjs).

## Integrate with your stack

- [Quickstart](/docs/quickstart): choose a shader and run your first export.
- [JavaScript](/docs/javascript): mount, update, interact with, and destroy a background.
- [React](/docs/react): use the component included in a downloaded kit.
- [Next.js](/docs/nextjs): keep WebGL rendering inside a client boundary.
- [AI assistants and MCP](/docs/mcp): connect an assistant to shader search, configuration, previews and exports.
- [Shader reference](/docs/shaders): browse the public catalog's descriptions, presets and controls.

## What you receive

A complete shader kit contains a specialized `shader-background.js`, a self-contained `index.html`, `ShaderBackground.jsx`, a configured `Hero.jsx`, `config.json`, `README.md`, and `LICENSE`. A third-party notice is included only where applicable. Each runtime supports its selected shader; changing the effect ID does not load other shaders.

There is no public npm package to install for these examples. Import the files from your downloaded kit. Keep website and server credentials out of your frontend code.

## Motion, performance and licensing

Give the canvas host an explicit size, keep meaningful content above the decorative background, and call `destroy()` when a component unmounts. Set a rendering budget, provide a pause control and respect reduced motion. See [performance and accessibility](/docs/performance) and [licensing](/docs/licensing) before shipping an integration.

## Documentation for coding assistants

The [documentation index](/llms.txt), [full Markdown documentation](/llms-full.txt), and [public catalog](/docs/catalog.json) are available without authentication. They describe the library and integration. Code downloads still use the normal member workflow; documentation access does not grant access to private exports or accounts.


---

Canonical: https://striktly.com/docs/quickstart/

# Add an interactive WebGL background to your website

## 1. Find a starting point

Open the [shader library](/shaders), choose a shader, and adjust its palette, motion, and camera. The website's public editor controls are available before sign-in; additional controls follow the current account access rules. Preview the configured shader in the inline showcase to see examples of real components.

## 2. Download a kit

Choose **Take the code**, sign in or create your free launch account, and download the complete kit. Verify your email if prompted. No payment is required for launch membership. Use the configuration included in the kit as your starting point.

## 3. Run the HTML example

Open the exported `index.html`. It contains a self-contained configured example. This is the quickest way to check the appearance before integrating it with your application.

## 4. Integrate with your stack

For a JavaScript app, copy `shader-background.js` and use `createBackground`. For React, copy the included `ShaderBackground.jsx` and `Hero.jsx` alongside that runtime. The React wrapper expects React 18 or later; React is not bundled into the downloaded shader.

```javascript
import { createBackground } from './shader-background.js';

const host = document.querySelector('#background');
const background = createBackground(host, {
  // Replace this object with the settings from your kit's config.json.
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  maxPixels: 700000,
  maxFPS: 30,
});

// Release GPU and event resources when this view is removed.
// background.destroy();
```

The host needs dimensions. A zero-height container will not produce a useful preview. Preserve the kit's stage CSS when the exported example includes it.

## Next steps

- [JavaScript lifecycle and interaction](/docs/javascript)
- [React integration](/docs/react)
- [Next.js integration](/docs/nextjs)
- [Configuration and camera settings](/docs/configuration)
- [License and asset notices](/docs/licensing)


---

Canonical: https://striktly.com/docs/javascript/

# Interactive shader backgrounds with JavaScript

Use `shader-background.js` from a downloaded Striktly kit. These examples do not refer to a hosted SDK or an npm dependency.

## Mount a background

```html
<section class="hero">
  <div id="background" aria-hidden="true"></div>
  <h1>Make the web feel something.</h1>
</section>
<style>
  .hero { position: relative; isolation: isolate; min-height: 70svh; overflow: hidden; }
  #background { position: absolute; inset: 0; z-index: -1; }
  .hero h1 { position: relative; padding: 3rem; }
</style>
```

```javascript
import { createBackground } from './shader-background.js';

// Copy this configuration from the config.json in your selected shader kit.
const config = {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  maxPixels: 700000,
  maxFPS: 30,
  globalPointer: false,
};
const hero = document.querySelector('.hero');
const background = createBackground(document.querySelector('#background'), config);

function move(event) { background.setPointer(event.clientX, event.clientY); }
function leave() { background.resetPointer(); }
hero.addEventListener('pointermove', move);
hero.addEventListener('pointerleave', leave);

function dispose() {
  hero.removeEventListener('pointermove', move);
  hero.removeEventListener('pointerleave', leave);
  background.destroy();
}
// Call dispose() when your router or component removes this view.
```

The exported `index.html` includes the selected shader's configured interaction wiring. Use that example when your shader needs specialized gestures, such as Logo Lab's drag-to-rotate interaction.

## Update settings

```javascript
background.update({ speed: 0.25, cameraZoom: 1.2 });
background.update({ paused: true });
background.update({ paused: false });
```

Use only settings supported by the selected shader. Read its [reference page](/docs/shaders) or the current MCP `get_shader` result before generating a configuration. The runtime is specialized to the exported shader; changing an effect ID is not a way to load the rest of the library.

## Clicks and cleanup

Where supported, `background.pulse(clientX, clientY)` triggers the shader's click interaction. Avoid consuming clicks intended for links, buttons, or inputs. Always call `destroy()` after use; removing a canvas element alone is not a lifecycle cleanup.

For a first implementation, start with the exported example rather than recreating all interaction handlers. Keep its applicable license, notices, and attribution comment.


---

Canonical: https://striktly.com/docs/react/

# Interactive shader backgrounds for React

Download a kit, then place `ShaderBackground.jsx` and `shader-background.js` next to each other in your React project. The kit also provides a configured `Hero.jsx`; using that component preserves any shader-specific stage CSS in the exported example.

## Use the included component

```jsx
import ShaderBackground from './ShaderBackground.jsx';

// Use the exported config.json for your chosen shader.
const config = {
  effect: 'prism',
  colors: ['#1b0b3b', '#ed72d6', '#628fff'],
  maxPixels: 700000,
  maxFPS: 30,
};

export default function LandingHero() {
  return (
    <ShaderBackground
      config={config}
      style={{ minHeight: '70svh', display: 'grid', placeItems: 'center' }}
    >
      <h1 style={{ position: 'relative', zIndex: 3 }}>
        A different feeling.
      </h1>
    </ShaderBackground>
  );
}
```

`ShaderBackground` accepts `config`, `children`, `style`, and `className`. It creates the renderer in an effect, updates it when configuration changes, forwards supported pointer interactions, and calls `destroy()` on unmount. React 18 or later is a peer requirement.

## Change settings with state

```jsx
import { useState } from 'react';
import ShaderBackground from './ShaderBackground.jsx';

const initial = { effect: 'prism', maxPixels: 700000, maxFPS: 30 };

export function AdjustableBackground() {
  const [config, setConfig] = useState(initial);
  return (
    <ShaderBackground config={config} style={{ minHeight: 420 }}>
      <button onClick={() => setConfig(current => ({ ...current, paused: !current.paused }))}>
        Pause / resume background
      </button>
    </ShaderBackground>
  );
}
```

Use a stable component key while adjusting one shader. To replace it with a different exported shader module, mount the corresponding component rather than changing only the effect ID.

## Server-rendered applications

WebGL needs a browser. For Next.js, use a client boundary and the [Next.js guide](/docs/nextjs). Keep a CSS background or poster as a useful fallback while the canvas initializes.


---

Canonical: https://striktly.com/docs/nextjs/

# WebGL shader backgrounds in Next.js

Keep the shader runtime on the client. Start with the `Hero.jsx`, `ShaderBackground.jsx`, and `shader-background.js` files from the same exported kit.

## App Router client boundary

Create this client component next to the exported `Hero.jsx`:

```jsx
'use client';
import dynamic from 'next/dynamic';

const ExportedHero = dynamic(() => import('./Hero.jsx'), {
  ssr: false,
  loading: () => <div style={{ minHeight: '100svh', background: '#08060e' }} />,
});

export default function ClientShaderHero() {
  return <ExportedHero />;
}
```

Then render it from a page or layout:

```jsx
import ClientShaderHero from './ClientShaderHero.jsx';

export default function Page() {
  return <main><ClientShaderHero /></main>;
}
```

This loads the exported browser module after the client boundary mounts. Keep important text, links, and forms as ordinary HTML or React content rather than drawing them inside the canvas.

## Images and deployment

Preserve embedded image data from your configured export. If you use image URLs instead, ensure those assets remain available and permit the browser to fetch them. A remote image failing CORS or disappearing can change the result.

Never ship a Supabase service key, Stripe key, or Striktly MCP token in a Next.js client component. The downloaded renderer runs locally; it does not need your Striktly account credentials in production.

## Runtime budgets

Use the kit's configuration to set pixel and frame-rate budgets appropriate for your layout. Test the final page on actual target devices. A desktop preview or device-size emulation does not establish phone frame rates. See [performance and accessibility](/docs/performance).


---

Canonical: https://striktly.com/docs/configuration/

# Configuration, palettes, and cameras

Start with the selected kit's `config.json`. Each shader has its own supported controls and ranges; settings are not interchangeable across the entire library.

## Shared settings

`colors` is a three-color palette. `speed` controls motion where supported. `paused` stops animation. `globalPointer` controls supported interaction outside the local preview. Render budgets include `maxPixels` and `maxFPS`.

Camera settings include `cameraZoom`, `cameraRotation`, `cameraX`, and `cameraY` where supported. Some scenes support additional camera tilt. Fur's preview zoom is intentionally fixed for its performance budget. Consult the current [shader reference](/docs/shaders) before setting ranges.

```javascript
background.update({
  colors: ['#08060e', '#8b35ff', '#ff35dd'],
  cameraZoom: 1.2,
  cameraRotation: -15,
  cameraX: 0.1,
  cameraY: 0,
});
```

These are integration examples, not a promise that every camera field is editable for every shader. Preserve the values from your selected export when a control is locked.

## Presets and reproducibility

Presets are named starting configurations. Randomize can change the palette, pattern, and supported camera settings. Keep the generated configuration or seed when you need to reproduce a result.

The website may curate a smaller preset picker than the underlying catalog. For example, Event Horizon's website picker contains Accretion Fire, Monochrome, and Blue Shift. Existing saved configurations remain supported.

## Photos and overlays

Supported website editors can integrate an uploaded image or an image overlay. Treat remote URLs as ongoing dependencies; embedded exports include image data in the exported files. Check your rights to any uploaded image before distributing a kit containing it.

The initial Striktly MCP configuration tools do not accept uploaded or remote images. Use the website editor for those options.


---

Canonical: https://striktly.com/docs/mcp/

# Striktly for AI coding assistants

Connect a compatible assistant to the existing Striktly remote MCP server to search the live library, inspect supported settings, configure a look, open a preview, and retrieve an integration kit.

## Connection

Server URL: `https://striktly.com/mcp`

The server uses Streamable HTTP and an OAuth browser authorization flow. Add that URL in your client's remote MCP settings, sign in to Striktly, review the connection's requested permissions and callback origin, and explicitly approve the connection. A compatible client must support Striktly's advertised OAuth discovery, PKCE, and client registration flow.

You can start at [Connect your AI assistant](/mcp/connect). A verified Free membership currently includes access during launch. Yearly, Lifetime, and complimentary access also follow the site's current membership policy. No Supabase, Stripe, or private website keys should be pasted into an assistant.

## Example client configuration

For clients using an `mcpServers` configuration with remote URL support:

```json
{
  "mcpServers": {
    "striktly": {
      "url": "https://striktly.com/mcp"
    }
  }
}
```

Configuration file names and UI locations vary by client. This snippet supplies the server URL; it does not bypass the browser sign-in and consent step. If your client does not support this OAuth flow, use the website export workflow instead.

## A useful first request

```text
Find a subtle interactive background for a React landing-page hero.
Show three options from Striktly, then configure the selected one in
violet and pink. Open a preview for review. After I choose a result,
export its React kit and integrate it with reduced motion and cleanup.
```

## Available tools

- `search_shaders`: search the current catalog by appearance, category, or name.
- `get_shader`: read a shader's presets, defaults, and supported settings schema.
- `configure_shader`: validate a configuration, optionally with Randomize.
- `preview_shader`: create a website preview link containing the validated configuration.
- `export_shader`: retrieve the selected shader's specialized HTML, JavaScript, or React integration kit.
- `confirm_shader_export`: acknowledge a successful file delivery. Call this only after the assistant actually saves or delivers the files.

Search and inspect before generating settings. The assistant's own project tools write the exported files; Striktly does not receive access to your repository or filesystem. The MCP does not administer accounts, change billing, or manage your saved configurations.

## Scope and revocation

Connections expire after 30 days and can be revoked from Account → AI connections. Configuration tools do not accept uploaded or remote images in the initial MCP version. Use the website editor when you need those image options.

Registry and documentation listings make the integration discoverable. They do not connect a user's assistant or grant access automatically.


---

Canonical: https://striktly.com/docs/performance/

# Performance and accessibility

## Start with a rendering budget

A full-screen shader costs more than a small decorative panel. Begin with a moderate pixel budget and frame-rate limit, then measure the finished page on target hardware.

```javascript
background.update({ maxPixels: 700000, maxFPS: 30 });
```

These example limits trade detail and motion smoothness for lower rendering cost. They do not guarantee a particular frame rate. Large displays, multiple canvases, transparent layers, complex scenes, and device thermal limits all matter.

## Respect reduced motion

```javascript
const motion = matchMedia('(prefers-reduced-motion: reduce)');
const syncMotion = () => background.update({ paused: motion.matches });
syncMotion();
motion.addEventListener('change', syncMotion);

// During teardown:
// motion.removeEventListener('change', syncMotion);
// background.destroy();
```

Combine this preference with any explicit pause control you provide. Do not automatically resume an animation that the visitor chose to pause.

## Pause work the visitor cannot see

Use an `IntersectionObserver` to pause an offscreen background, and respond to the document's visibility state. Keep configuration state separate from visibility state so returning to the page resumes only when appropriate.

```javascript
let visible = true;
let userPaused = false;
const sync = () => background.update({
  paused: userPaused || !visible || document.hidden || motion.matches,
});
const observer = new IntersectionObserver(([entry]) => {
  visible = entry.isIntersecting;
  sync();
});
observer.observe(document.querySelector('.hero'));
document.addEventListener('visibilitychange', sync);

// On teardown, disconnect observer and remove visibility/preference listeners.
```

## Keep the content usable

- Keep the canvas decorative and separate from meaningful text.
- Use a readable palette and test contrast across animation states.
- Keep links and form controls usable by keyboard.
- Provide an accessible pause button for persistent animation.
- Use a CSS color or poster fallback when WebGL is unavailable.
- Call `destroy()` when a component unmounts.

Use video posters for large galleries instead of running every shader simultaneously. A small number of visible live previews is a better starting point than dozens of WebGL contexts.

## Freeze pointer interaction when pausing Prism

A time pause can leave cursor-driven deformation active. For a full freeze in Prism, set `interaction` to zero while paused and restore your configured value when resuming. Use one shared pause-state function so a visibility or preference change cannot accidentally override the visitor's Pause button.

```javascript
// background is the mounted Prism instance; restore your own configured value.
const configuredInteraction = 1;
const preference = matchMedia('(prefers-reduced-motion: reduce)');
let userPaused = false;

function syncPause() {
  const paused = userPaused || document.hidden || preference.matches;
  background.update({
    paused,
    interaction: paused ? 0 : configuredInteraction,
  });
}

// Call this from your own accessible Pause / Resume button.
function togglePause() {
  userPaused = !userPaused;
  syncPause();
}

preference.addEventListener('change', syncPause);
document.addEventListener('visibilitychange', syncPause);
syncPause();

// On teardown, remove these listeners and call background.destroy().
```

Use this shared function in place of the simpler preference-only listener above when your page also has a manual pause control. Keep offscreen visibility in the same state calculation if you add an IntersectionObserver.


---

Canonical: https://striktly.com/docs/licensing/

# Licensing and exported assets

Download access and the license on an already downloaded kit are different things. During the current launch offer, a verified Free membership includes code and image downloads. The launch offer is not a promise of permanent free access.

## Keep the included files

Striktly kits include an MIT license for the included Striktly code. Preserve the `LICENSE`, applicable third-party notices, and the HTML attribution comment included in your export. Read the actual license files in your downloaded kit; they are the authoritative terms for its contents.

The MIT license allows use, copying, modification, and distribution subject to its notice requirements. Commercial and client projects are supported under the included license. Optional support payments do not change the current launch access to the shader library.

## Third-party material

A kit includes `THIRD_PARTY_NOTICES.md` only when applicable. Individual assets can carry their own terms. Keep any required attribution and notices when distributing those assets with a project.

An uploaded logo, photo, or overlay remains your responsibility to license. Striktly's code license does not grant rights to third-party imagery you supply.

## Documentation and membership

These public guides describe integration and configuration. They do not provide account credentials, authorize another person's membership, or expose private export runtime URLs. Use the website or an authorized MCP connection to obtain a kit.

For account or licensing questions, use the [contact form](/contact). The site's [Terms](/terms), [Privacy notice](/privacy), and [refund policy](/refunds) remain available separately.


---

Canonical: https://striktly.com/docs/shaders/

# Interactive WebGL shader backgrounds

Browse 89 animated backgrounds for website heroes, feature panels, cards and calls to action. Choose from gradients and light sheets, particles, glass, liquid metal, ink, grids, wireframes and organic motion. Each shader reference includes presets, supported controls and a JavaScript integration example.

Start with [Prism](/docs/shaders/prism) for a soft gradient hero, [Kinetic](/docs/shaders/kinetic) for a mouse-reactive dot grid, or [Spectral Glass](/docs/shaders/spectral-glass) for colored glass panels. The [React](/docs/react), [JavaScript](/docs/javascript) and [Next.js](/docs/nextjs) guides cover integration, sizing, reduced motion and cleanup.

## All shader references

- [ASCII Plasma](/docs/shaders/ascii-plasma): Procedural terminal glyphs reveal a drifting plasma field. Your cursor stirs the characters into a glowing eddy with a delayed wake.
- [Atlas](/docs/shaders/atlas): Organic ridges and valleys drift across a layered terrain map. Fine contours gather around the elevation beneath your pointer.
- [Aureole](/docs/shaders/aureole): A translucent loop folds and breathes through fine luminous filaments. Iridescent surfaces shift color while glowing edges trace its depth; your cursor gently deforms the membrane.
- [Aurora](/docs/shaders/aurora): Luminous curtains lift around your cursor and brighten in its wake, drifting back into a quiet night sky.
- [Bitwave](/docs/shaders/bitwave): Discrete luminous ribbons travel across a dark pixel field. The cursor bends their wave crests and leaves a spring-soft directional wake.
- [Blocky](/docs/shaders/blocky): A precise grid steps from a soft page tone into saturated color. The pointer lifts nearby tiles while rare accent cells breathe through the flow.
- [Bloom](/docs/shaders/bloom): Suspended pigment swirls gently around your cursor and drags into a slow, diffusing wake.
- [Caustics](/docs/shaders/caustics): Refracted pool light responds to mouse strokes with fading ripples, local refraction, and brighter moving edges.
- [Chrome](/docs/shaders/chrome): Liquid-metal reflections bend beneath your cursor, leaving a thin specular sheen as their folds settle.
- [Comet](/docs/shaders/comet): Three luminous comets zip through curved paths, accelerating into bright streaks. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [Commit Grid](/docs/shaders/commit-grid): Rounded tonal cells breathe through eight motion patterns. Hover to light nearby cells or click to send a soft ripple through the grid.
- [Contour](/docs/shaders/contour): Closed contour lines wrap around three soft hills. Your cursor raises a local summit and leaves a gently settling elevation wake.
- [Cosmic Horizon](/docs/shaders/cosmic-horizon): A vast dark planet meets a thin sunlit horizon and a deep atmospheric bloom. Slow surface drift and sparse stars establish scale; the cursor gently shifts the planet beneath the light.
- [Crosslight](/docs/shaders/crosslight): Two sheets of light cross in a quiet luminous seam. Opposing slopes and a spring-soft pointer trail create depth without heavy rendering.
- [Cube](/docs/shaders/cube): A crisp cube turns slowly through a fine square mesh. Your cursor tilts its faces while back edges fade into depth.
- [Data Bend](/docs/shaders/data-bend): A luminous data sheet flows from the foreground through a rounded bend and climbs into an endless wall of qubit trails. Companion particles follow the turn. Hover over a trail to illuminate its full length, or over a particle to brighten it.
- [Data Infinity](/docs/shaders/data-infinity): A thin plane of luminous qubit trails and companion particles streams from behind the camera toward infinity. Straight lanes converge into the distance, with glowing signals flowing alongside them. Move your pointer over the signals to illuminate nearby trails and particles.
- [Dotted Aura](/docs/shaders/dotted-aura): A quiet circular aura emerges from a fine field of dots. Moving highlights travel around its rim; your cursor stirs a local wake and brightens nearby dots.
- [Drift](/docs/shaders/drift): Layered dust floats at different depths. Your cursor gently parts the field, leaving a delayed luminous wake.
- [Dune](/docs/shaders/dune): Long wind-carved ridges fold into a soft dune field. Move the pointer to lift a sandbank and draw a trailing curve.
- [Earth](/docs/shaders/earth): Continents emerge from thousands of individual glowing dots on a rotating globe, with open oceans and no solid skin. Lines mode adds a fine spherical wireframe beneath the dotted continents, with no solid skin. Your cursor gently tilts the world.
- [Ember](/docs/shaders/ember): Warm sparks rise with depth and flickering light. The pointer pushes them aside while a soft wake follows your movement.
- [Ember Folds](/docs/shaders/ember-folds): Stationary charcoal shapes form stacked folds or a touching pattern, with soft ember light creeping along their edges. Hover to draw the concealed light toward the cursor.
- [Event Horizon](/docs/shaders/event-horizon): A black circular shadow framed by flowing accretion light and spiraling particles on a fixed black background. Color 1 controls the inner glow, color 2 the outer glow, and color 3 the stars and particles. Hover to disturb the nearby particle flow.
- [Facet Field](/docs/shaders/facet-field): A deep field of triangular facets catches a concentrated light, opening into a warm crystalline relief. Move your cursor to rake light across the folds.
- [Fan](/docs/shaders/fan): Soft rays open from a point below the frame. A slow pivot and drifting highlights give the light a sculptural, architectural feel.
- [Fault Lines](/docs/shaders/fault-lines): Irregular charcoal plates rise above deep illuminated seams. Slow shifts in elevation catch the studio light; hover to lift nearby plates and brighten their seams.
- [Filament](/docs/shaders/filament): Fine upright strands sway in a continuous flow. Your cursor parts the lines and draws a soft, delayed fold through them.
- [Firefly](/docs/shaders/firefly): Six sparkling heads dart and wander independently, each leaving a short particle wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [Flock](/docs/shaders/flock): Loose ribbons of points move in a coordinated wave. Your cursor lifts the flock into a local curl and a trailing fold.
- [Fog](/docs/shaders/fog): Layered mist drifts through soft shafts of light. Your cursor parts and stirs the nearby fog.
- [Fur](/docs/shaders/fur): A dense field of tapered fibers catches soft studio light. Shaded roots and luminous tips reveal the depth of the pile; move your cursor to gently comb the strands.
- [Geodesic](/docs/shaders/geodesic): A triangulated geodesic sphere breathes slowly. Its delicate facets rotate with your cursor and fade into darker edges on the far side.
- [Glacial](/docs/shaders/glacial): Thick, luminous ice refracts soft pigment beneath its surface. The cursor bends the glass and releases delicate fading ripples.
- [Glass](/docs/shaders/glass): Overlapping lenses follow with different weight, magnifying color locally and catching light along their rims.
- [Globe](/docs/shaders/globe): A fine latitude-and-longitude globe turns in perspective. Cursor movement tilts its axis while front-facing meridians catch a soft highlight.
- [Halftone](/docs/shaders/halftone): Staggered ink dots expand and contract with a rolling field. Your cursor lifts the print into a local highlight that softly settles.
- [Halo](/docs/shaders/halo): An elliptical ring breathes in the dark, carrying a silver highlight around its rim. Pointer movement gently shifts its center.
- [Helix](/docs/shaders/helix): Three braided particle trails drift around one another on slow, looping paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [High Plains](/docs/shaders/high-plains): Fine wire terrain drifts through layered ridges. Hover to lift broad plateaus from the surface; the land settles gently when your cursor moves away.
- [Infinite Funnel](/docs/shaders/infinite-funnel): An unbroken wireframe funnel bends into the distance. Rings flow toward you without a restart while the curved walls draw you deeper; move your cursor to shift the perspective.
- [Ink Bloom](/docs/shaders/ink-bloom): Ink continuously blooms outward from the center into a uniform solid color. Overlapping pigment fronts unfurl into translucent curls and feathered wisps, dissolving as fresh ink expands from within. Hover to diffuse and blend the pigment locally; the mixed areas linger and gradually settle.
- [Ion Tunnel](/docs/shaders/ion-tunnel): Travel steadily through a continuous cave of electric filaments. Fixed, bumpy wall layers pass the camera with depth parallax and a circular opening ahead. Hover to energize nearby wires.
- [Kinetic](/docs/shaders/kinetic): An elastic grid gathers beneath the pointer. Click to send a bright, expanding wave through its lines and dots.
- [Knot](/docs/shaders/knot): A continuous torus knot loops through a fine three-dimensional mesh. Your cursor tilts the sculpture while highlights travel around its folds.
- [Lattice](/docs/shaders/lattice): A precise diamond lattice stretches locally, revealing a cool highlight that follows your cursor with a delayed spring.
- [Lava](/docs/shaders/lava): Glowing pools rise, drift together and pull apart into soft, rounded blobs. Randomized sizes and independent motion keep the liquid changing. Move your cursor to gently push the flow.
- [Liquid Chrome](/docs/shaders/liquid-chrome): A slow-moving sheet of liquid chrome folds through dark pools and broad studio reflections. Move your cursor to press into the surface and draw a soft metallic wake.
- [Liquid Droplets](/docs/shaders/liquid-droplets): Glossy liquid pools rise from one continuous violet and pink surface. Drag your cursor to swirl and stretch the entire liquid field, blending pigment into flowing tendrils. Click to send a ripple through the pools.
- [Liquid Laminar](/docs/shaders/liquid-laminar): Coral and cobalt pigment flows beneath undulating glass. Surface normals bend the light while cursor pressure and a delayed wake sculpt the liquid.
- [Logo Lab](/docs/shaders/logo-lab): Sculpt the Striktly wordmark or your own SVG or transparent logo on a reflective studio stage. Soft shadows, cutout shading and studio lights reveal its depth. Move to tilt, or drag to rotate.
- [Membrane](/docs/shaders/membrane): A stretched pearlescent skin catches soft studio light. Cursor pressure creates a local depression with a spring-soft rebound.
- [Mercury](/docs/shaders/mercury): Broad rounded folds carry polished reflections. Cursor pressure dents the metal and leaves a weighty reflective wake.
- [Meridian](/docs/shaders/meridian): Nested orbital contours breathe around a quiet center. The pointer bends the rings locally while a soft wake trails behind.
- [Mesh Ribbon](/docs/shaders/mesh-ribbon): Fine colored strands twist into a soft, open mesh wave. Slow folds change its silhouette while your cursor gently lifts nearby threads and leaves a delayed wake.
- [Moiré](/docs/shaders/moire): Overlapping fine gratings create broad interference waves. Your cursor changes their local alignment and opens rippling bands.
- [Mosaic](/docs/shaders/mosaic): Small glazed tiles catch shifting color and a fine edge highlight. Your pointer swirls the mosaic into a coherent, delayed wave.
- [Obsidian Burst](/docs/shaders/obsidian-burst): A dense cluster of sharp obsidian shards turns in darkness, catching restrained blue-gray reflections and amber glints. Your cursor rotates the sculpture.
- [Oilskin](/docs/shaders/oilskin): A dark liquid surface reveals shifting thin-film color in its reflective folds. Slow cursor pressure stretches the sheen into a lingering wake.
- [Orbit](/docs/shaders/orbit): Four spiraling arms turn at different speeds around a quiet center. The pointer twists nearby stars into a brief orbital eddy.
- [Photon Fabric](/docs/shaders/photon-fabric): A regular lattice of luminous dots folds into a flowing wave. Blue shadows meet bright warm crests, while foreground points soften through depth. Your cursor lifts and swirls the local fabric.
- [Plasma Halo](/docs/shaders/plasma-halo): A luminous plasma ring bends through a crisp pixel field. Its rim breathes and fractures into tonal cells as the cursor stirs the energy; optional edge light frames the scene.
- [Point Form](/docs/shaders/point-form): Organic ink dots bloom from the bottom upward, spreading in uneven clusters across a flat field. Each dot grows at its own pace; hover to encourage the ink around your cursor.
- [Prism](/docs/shaders/prism): An oblique sheet of violet, pink and blue light drifts across a dark field, with fine grain and a weighty pointer glide.
- [Proximity](/docs/shaders/proximity): A field of fine dots grows into a soft proximity mask beneath your cursor. Click waves bloom outward and slowly dissolve.
- [Reaction Diffusion](/docs/shaders/reaction-diffusion): A small GPU reaction-diffusion simulation grows branching cultures and winding labyrinths. Move your cursor to seed new pigment into the evolving field.
- [Refracted Glass](/docs/shaders/refracted-glass): Sculptural glass objects catch cyan, violet and pink studio reflections. Choose a cube, sphere, triangular frame, pyramid or looping sculpture; your cursor rotates the glass and reveals its changing reflections.
- [Ribbon](/docs/shaders/ribbon): A slender ribbon of light folds across a dark field. Its curved edge follows your cursor with a soft, weighty glide.
- [Ridgeline](/docs/shaders/ridgeline): Fly through a valley of glowing wireframe ridges. A scan pulse travels across the landscape as distant peaks fade into fog. Your cursor leans and glides the camera.
- [Riso Dither](/docs/shaders/riso-dither): Wind-swept ribbons resolve into a crisp Bayer dither pattern. Cursor movement bends the flow and draws a brighter core through the ink.
- [Rorschach](/docs/shaders/rorschach): Mirrored inkblots slowly bloom, join and pull apart around a central fold. Feathered edges and pools of pigment keep each shape organic; move your cursor to gently reshape both sides at once.
- [Silk](/docs/shaders/silk): Slow satin folds shear beneath your cursor, catching a highlight that stretches into a soft trailing wake.
- [Soft Cells](/docs/shaders/soft-cells): Bubbles of different sizes drift together, squeeze past their neighbors and open into soft, rounded connections. Independent motion keeps the cells mixing; move your cursor to gently stir them.
- [Soft Resin](/docs/shaders/soft-resin): Rounded translucent forms merge into a soft liquid body. Cursor attraction slowly pulls the resin while highlights describe its thickness.
- [Sonar](/docs/shaders/sonar): Soft rings brighten a precise dot field. striktly pings arrive slowly; click anywhere to add your own expanding signal.
- [Spectral Glass](/docs/shaders/spectral-glass): Dark, irregular glass panels catch drifting red and blue light. Thin prismatic seams split into spectral highlights, while softer reflections travel behind the glass. Hover to draw light into nearby panels.
- [Strata](/docs/shaders/strata): Quiet horizontal layers form rolling horizons. A local cursor lift gives their fine lines a soft, tactile response.
- [Stream](/docs/shaders/stream): Fine luminous streaks travel in parallel currents. Cursor movement parts the flow and pulls a soft directional wake.
- [Terrain](/docs/shaders/terrain): A receding wire grid rolls gently toward the horizon. Pointer movement lifts the surface; clicks travel across it as light waves.
- [Tidal Glass](/docs/shaders/tidal-glass): Overlapping water swells refract a smoky luminous bed. Moving the cursor adds a pressure hollow and small expanding wavelets.
- [Tide](/docs/shaders/tide): Thousands of fine points form a rolling, tilted wave field. Move your cursor to lift a local crest and draw a soft wake.
- [Torus](/docs/shaders/torus): A sculptural ring turns through a precise wire mesh. Perspective, quiet breathing, and an eased cursor tilt reveal its depth.
- [Trace](/docs/shaders/trace): Fine spirals glide through soft figure-eight paths, leaving a delicate fading wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [Velour](/docs/shaders/velour): Broad luminous folds drift through a softly grained dark field. A growing glow swells outward and fades in a repeating pulse; your cursor gently parts and bends the nearby veils.
- [Vitreous](/docs/shaders/vitreous): A softly rippled glass surface refracts silver light around a deep central shadow. A physical spring carries the cursor through its surface, matching the Layers hero composition.
- [Vortex](/docs/shaders/vortex): Orbiting particle trails swirl around moving centers with broad, fading curls. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [Warp Tunnel](/docs/shaders/warp-tunnel): Projected stars stream through depth toward the camera. Cursor steering bends their flight while depth-aligned streaks catch the light.
- [Wisp](/docs/shaders/wisp): Weightless spirals float slowly across the canvas on gentle wandering paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.
- [Worm Hole](/docs/shaders/worm-hole): An immersive journey inside a glowing wormhole. Smooth walls twist around a luminous core as rolling waves spiral outward and sweep past the camera. Move your pointer to shift your view through the passage.


---

Canonical: https://striktly.com/docs/shaders/ascii-plasma/

# ASCII Plasma

Procedural terminal glyphs reveal a drifting plasma field. Your cursor stirs the characters into a glowing eddy with a delayed wake.

Category: **Pixels / phosphor glyphs**.

[Open ASCII Plasma in the live editor](/ascii-plasma) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Phosphor**: `#041510`, `#31b88c`, `#c2ffe1`
- **Amber terminal**: `#1a1005`, `#d89029`, `#ffe8aa`
- **Violet terminal**: `#110b23`, `#a576eb`, `#eee1ff`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Glyph size** (`cellSize`): 8 to 36. Default: `16`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 9. Default: `9`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.6`.
- **Phosphor glow** (`softness`): 0 to 1. Default: `0.35`.
- **Flicker** (`turbulence`): 0 to 2. Default: `0.45`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/ascii-plasma) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ascii",
    "colors": [
      "#041510",
      "#31b88c",
      "#c2ffe1"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/atlas/

# Atlas

Organic ridges and valleys drift across a layered terrain map. Fine contours gather around the elevation beneath your pointer.

Category: **Topographic / organic terrain**.

[Open Atlas in the live editor](/atlas) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Mineral**: `#0e171c`, `#506d76`, `#b7d2d7`
- **Limestone**: `#eee8dc`, `#9e937d`, `#6b6653`
- **Plum atlas**: `#1b1020`, `#785c80`, `#d8b9dc`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.25`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `32`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Relief** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.4`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/atlas) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "atlas",
    "colors": [
      "#0e171c",
      "#506d76",
      "#b7d2d7"
    ],
    "speed": 0.25,
    "zoom": 1,
    "gridSpacing": 32,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/aureole/

# Aureole

A translucent loop folds and breathes through fine luminous filaments. Iridescent surfaces shift color while glowing edges trace its depth; your cursor gently deforms the membrane.

Category: **Atmosphere / iridescent energy membrane**.

[Open Aureole in the live editor](/aureole) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Auric membrane**: `#030b10`, `#087dcc`, `#c1d8a3`
- **Opal membrane**: `#130b20`, `#aa62c5`, `#f7c9bf`
- **Polar membrane**: `#04131a`, `#26a7ad`, `#c7ddff`

## Shader and camera controls

- **Motion speed** (`speed`): 0 to 2. Default: `0.4`.
- **Shape size** (`zoom`): 0.3 to 3. Default: `2.2`.
- **Breathing** (`amplitude`): 0 to 2. Default: `1`.
- **Folds** (`turbulence`): 0 to 2. Default: `0.8`.
- **Filament density** (`meshDetail`): 8 to 48. Default: `32`.
- **Filament weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Iridescence** (`iridescence`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.85`.
- **Edge diffusion** (`softness`): 0 to 1. Default: `0.35`.
- **Cursor deformation** (`interaction`): 0 to 2. Default: `1`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.004`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.45`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `16`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/aureole) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "aureole",
    "colors": [
      "#030b10",
      "#087dcc",
      "#c1d8a3"
    ],
    "speed": 0.4,
    "zoom": 2.2,
    "amplitude": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/aurora/

# Aurora

Luminous curtains lift around your cursor and brighten in its wake, drifting back into a quiet night sky.

Category: **Light / atmosphere**.

[Open Aurora in the live editor](/aurora) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Borealis**: `#071b26`, `#2fa49b`, `#b6ebcc`
- **Ultraviolet**: `#100e2b`, `#6b43b6`, `#e5b4ef`
- **Solar**: `#24121a`, `#c36532`, `#f9d49a`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.4`.
- **Scale** (`scale`): 0.3 to 3. Default: `1.1`.
- **Softness** (`softness`): 0 to 1. Default: `0.55`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1.15`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.6`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.035`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/aurora) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "aurora",
    "colors": [
      "#071b26",
      "#2fa49b",
      "#b6ebcc"
    ],
    "speed": 0.4,
    "scale": 1.1,
    "softness": 0.55,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/bitwave/

# Bitwave

Discrete luminous ribbons travel across a dark pixel field. The cursor bends their wave crests and leaves a spring-soft directional wake.

Category: **Pixels / digital ribbons**.

[Open Bitwave in the live editor](/bitwave) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Neon tide**: `#061219`, `#248886`, `#b6fae1`
- **Cobalt bits**: `#090e24`, `#3867c4`, `#b2d5ff`
- **Peach bits**: `#1e0e18`, `#b45c7b`, `#ffc9a5`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Pixel size** (`cellSize`): 2 to 120. Default: `10`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 12. Default: `5`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.3`.
- **Wave height** (`amplitude`): 0 to 2. Default: `0.3`.
- **Wave detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/bitwave) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "bitwave",
    "colors": [
      "#061219",
      "#248886",
      "#b6fae1"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/blocky/

# Blocky

A precise grid steps from a soft page tone into saturated color. The pointer lifts nearby tiles while rare accent cells breathe through the flow.

Category: **Pixels / stepped color cells**.

[Open Blocky in the live editor](/blocky) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Lavender blocks**: `#faf8ff`, `#d3c1fa`, `#7950e8`
- **Seafoam blocks**: `#edf7f1`, `#addbc6`, `#287d69`
- **Apricot blocks**: `#fff6ea`, `#efc799`, `#c56a41`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Pixel size** (`cellSize`): 2 to 120. Default: `48`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 12. Default: `7`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.2`.
- **Drift bend** (`amplitude`): 0 to 2. Default: `0.3`.
- **Accent glints** (`turbulence`): 0 to 2. Default: `0.45`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/blocky) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "blocky",
    "colors": [
      "#faf8ff",
      "#d3c1fa",
      "#7950e8"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/bloom/

# Bloom

Suspended pigment swirls gently around your cursor and drags into a slow, diffusing wake.

Category: **Ink / diffusion**.

[Open Bloom in the live editor](/bloom) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ember**: `#271b28`, `#be644d`, `#fbd1a4`
- **Moss**: `#172923`, `#648866`, `#d9dcb0`
- **Nebula**: `#171d3c`, `#7165a8`, `#e5afc8`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.38`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.6`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1.1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.09`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/bloom) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "bloom",
    "colors": [
      "#271b28",
      "#be644d",
      "#fbd1a4"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.38,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/caustics/

# Caustics

Refracted pool light responds to mouse strokes with fading ripples, local refraction, and brighter moving edges.

Category: **Water / refraction**.

[Open Caustics in the live editor](/caustics) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Lagoon**: `#072c3c`, `#137c89`, `#abebdd`
- **Champagne**: `#32291b`, `#9c8654`, `#ffedbb`
- **Ice**: `#122d51`, `#658db4`, `#dff6ff`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.48`.
- **Scale** (`scale`): 0.3 to 3. Default: `1.45`.
- **Softness** (`softness`): 0 to 1. Default: `0.24`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.025`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/caustics) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "caustics",
    "colors": [
      "#072c3c",
      "#137c89",
      "#abebdd"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.48,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/chrome/

# Chrome

Liquid-metal reflections bend beneath your cursor, leaving a thin specular sheen as their folds settle.

Category: **Metal / reflection**.

[Open Chrome in the live editor](/chrome) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Titanium**: `#15191e`, `#707b88`, `#e9e5dc`
- **Copper**: `#281b19`, `#a5684c`, `#f7d9aa`
- **Cobalt**: `#10192e`, `#36599b`, `#bfd8ed`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.24`.
- **Scale** (`scale`): 0.3 to 3. Default: `0.8`.
- **Softness** (`softness`): 0 to 1. Default: `0.22`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1.08`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.85`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.032`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/chrome) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "chrome",
    "colors": [
      "#15191e",
      "#707b88",
      "#e9e5dc"
    ],
    "speed": 0.24,
    "scale": 0.8,
    "softness": 0.22,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/comet/

# Comet

Three luminous comets zip through curved paths, accelerating into bright streaks. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / luminous wake**.

[Open Comet in the live editor](/comet) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver comet**: `#080d19`, `#6e9bb9`, `#edf9ff`
- **Solar comet**: `#1b0d18`, `#cc7861`, `#fff0b4`
- **Jade comet**: `#071914`, `#48b58b`, `#d3ffdc`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `3000`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.45`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.45`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.06`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.45`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/comet) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "comet",
    "colors": [
      "#080d19",
      "#6e9bb9",
      "#edf9ff"
    ],
    "speed": 0.3,
    "particleCount": 3000,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/commit-grid/

# Commit Grid

Rounded tonal cells breathe through eight motion patterns. Hover to light nearby cells or click to send a soft ripple through the grid.

Category: **Grid / animated contribution cells**.

[Open Commit Grid in the live editor](/commit-grid) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Midnight commits**: `#080c14`, `#17243e`, `#42587e`
- **Garden commits**: `#06100b`, `#143821`, `#39d353`
- **Copper commits**: `#130b09`, `#53271d`, `#ef8454`

## Shader and camera controls

- **Motion speed** (`speed`): 0 to 2. Default: `0.8`.
- **Cell size** (`cellSize`): 4 to 32. Default: `8`.
- **Gap** (`cellGap`): 0 to 24. Default: `3`.
- **Corner radius** (`cellRadius`): 0 to 12. Default: `2`.
- **Tone levels** (`levels`): 2 to 12. Default: `5`.
- **Max opacity** (`opacity`): 0.1 to 1. Default: `0.85`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Hover strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Hover radius** (`gridRadius`): 40 to 320. Default: `100`.
- **Click ripple** (`pulseStrength`): 0 to 2. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.05`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/commit-grid) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "commitgrid",
    "colors": [
      "#080c14",
      "#17243e",
      "#42587e"
    ],
    "speed": 0.8,
    "cellSize": 8,
    "cellGap": 3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/contour/

# Contour

Closed contour lines wrap around three soft hills. Your cursor raises a local summit and leaves a gently settling elevation wake.

Category: **Topographic / hill contours**.

[Open Contour in the live editor](/contour) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moss map**: `#0c1915`, `#486e59`, `#b9d6ad`
- **Survey paper**: `#eee9dc`, `#9c947d`, `#526653`
- **Midnight survey**: `#0b1524`, `#45657f`, `#b9d2e8`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `38`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Relief** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.35`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/contour) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "contour",
    "colors": [
      "#0c1915",
      "#486e59",
      "#b9d6ad"
    ],
    "speed": 0.2,
    "zoom": 1,
    "gridSpacing": 38,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/cosmic-horizon/

# Cosmic Horizon

A vast dark planet meets a thin sunlit horizon and a deep atmospheric bloom. Slow surface drift and sparse stars establish scale; the cursor gently shifts the planet beneath the light.

Category: **Atmosphere / planetary limb glow**.

[Open Cosmic Horizon in the live editor](/cosmic-horizon) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Solar dawn**: `#080309`, `#d3321a`, `#ffd692`
- **Blue atmosphere**: `#030813`, `#1856ad`, `#b5eaff`
- **Violet eclipse**: `#080311`, `#67318a`, `#f5aadd`

## Shader and camera controls

- **Surface drift** (`speed`): 0 to 2. Default: `0.25`.
- **Planet radius** (`planetRadius`): 0.6 to 4. Default: `2.1`.
- **Atmosphere width** (`atmosphere`): 0.005 to 0.18. Default: `0.045`.
- **Sun angle** (`flowAngle`): -180 to 180. Default: `48`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `0.6`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.7`.
- **Star density** (`starDensity`): 0 to 1. Default: `0.12`.
- **Star twinkle** (`twinkle`): 0 to 1. Default: `0.25`.
- **Cursor parallax** (`interaction`): 0 to 2. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.22`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/cosmic-horizon) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "cosmic",
    "colors": [
      "#080309",
      "#d3321a",
      "#ffd692"
    ],
    "speed": 0.25,
    "planetRadius": 2.1,
    "atmosphere": 0.045,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/crosslight/

# Crosslight

Two sheets of light cross in a quiet luminous seam. Opposing slopes and a spring-soft pointer trail create depth without heavy rendering.

Category: **Prism / intersecting sheets**.

[Open Crosslight in the live editor](/crosslight) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Steel**: `#090b0d`, `#778594`, `#e1e8ee`
- **Lilac**: `#0d0912`, `#8d79a8`, `#ecdef7`
- **Bronze**: `#0e0b08`, `#9d835e`, `#f6e3b9`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.32`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.45`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `0.95`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.85`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.015`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/crosslight) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "crosslight",
    "colors": [
      "#090b0d",
      "#778594",
      "#e1e8ee"
    ],
    "speed": 0.32,
    "scale": 1,
    "softness": 0.45,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/cube/

# Cube

A crisp cube turns slowly through a fine square mesh. Your cursor tilts its faces while back edges fade into depth.

Category: **3D / wireframe cube**.

[Open Cube in the live editor](/cube) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ice cube**: `#08131f`, `#568ead`, `#deefff`
- **Rose cube**: `#1c0b18`, `#b45c92`, `#ffdbef`
- **Mint cube**: `#081e18`, `#52aa85`, `#deffe9`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.25`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `8`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Form** (`amplitude`): 0 to 2. Default: `0.3`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.25`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/cube) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "cube",
    "colors": [
      "#08131f",
      "#568ead",
      "#deefff"
    ],
    "speed": 0.25,
    "zoom": 1,
    "meshDetail": 8,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/data-bend/

# Data Bend

A luminous data sheet flows from the foreground through a rounded bend and climbs into an endless wall of qubit trails. Companion particles follow the turn. Hover over a trail to illuminate its full length, or over a particle to brighten it.

Category: **Data / luminous signals**.

[Open Data Bend in the live editor](/shaders/data-bend) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Quantum bend**: `#03051b`, `#3549f0`, `#ec24c5`
- **Fiber optic**: `#010d14`, `#00c8f5`, `#8affdb`
- **Solar signal**: `#100409`, `#ff4e24`, `#ffca78`

## Shader and camera controls

- **Data speed** (`speed`): 0 to 2.5. Default: `0.7`.
- **Trail density** (`density`): 40 to 420. Default: `380`.
- **Trail length** (`spread`): 0.2 to 2. Default: `1.2`.
- **Bend distance** (`bendStart`): 5 to 30. Default: `14`.
- **Bend radius** (`bendRadius`): 2 to 14. Default: `5`.
- **Companion particles** (`particleCount`): 0 to 220. Default: `150`.
- **Particle size** (`particleSize`): 0.4 to 2.5. Default: `1`.
- **Plane width** (`laneWidth`): 0.35 to 2. Default: `1`.
- **View elevation** (`cameraHeight`): 0.4 to 4. Default: `2.8`.
- **Plane angle** (`flowAngle`): -65 to 65. Default: `0`.
- **Signal width** (`lineWidth`): 0.4 to 2. Default: `0.7`.
- **Light bloom** (`edgeGlow`): 0 to 2. Default: `0.85`.
- **Field of view** (`scale`): 0.5 to 1.8. Default: `1`.
- **Pointer trail glow** (`interaction`): 0 to 1.5. Default: `0.65`.
- **Brightness** (`intensity`): 0.3 to 1.8. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -0.7 to 0.7. Default: `0`.
- **Vertical focus** (`cameraY`): -0.5 to 0.5. Default: `-0.1`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/data-bend) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "data-bend",
    "colors": [
      "#03051b",
      "#3549f0",
      "#ec24c5"
    ],
    "speed": 0.7,
    "density": 380,
    "spread": 1.2,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/data-infinity/

# Data Infinity

A thin plane of luminous qubit trails and companion particles streams from behind the camera toward infinity. Straight lanes converge into the distance, with glowing signals flowing alongside them. Move your pointer over the signals to illuminate nearby trails and particles.

Category: **Data / luminous signals**.

[Open Data Infinity in the live editor](/shaders/data-infinity) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Quantum**: `#020413`, `#1759ff`, `#ff27d8`
- **Fiber optic**: `#010d14`, `#00c8f5`, `#8affdb`
- **Solar signal**: `#100409`, `#ff4e24`, `#ffca78`

## Shader and camera controls

- **Data speed** (`speed`): 0 to 2.5. Default: `1`.
- **Trail density** (`density`): 40 to 420. Default: `320`.
- **Trail length** (`spread`): 0.2 to 2. Default: `1`.
- **Companion particles** (`particleCount`): 0 to 220. Default: `150`.
- **Particle size** (`particleSize`): 0.4 to 2.5. Default: `1`.
- **Plane width** (`laneWidth`): 0.35 to 2. Default: `1`.
- **View elevation** (`cameraHeight`): 0.4 to 4. Default: `1.5`.
- **Plane angle** (`flowAngle`): -65 to 65. Default: `-18`.
- **Signal width** (`lineWidth`): 0.4 to 2. Default: `1`.
- **Light bloom** (`edgeGlow`): 0 to 2. Default: `1.1`.
- **Field of view** (`scale`): 0.5 to 1.8. Default: `1`.
- **Pointer glow** (`interaction`): 0 to 1.5. Default: `0.65`.
- **Brightness** (`intensity`): 0.3 to 1.8. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -0.7 to 0.7. Default: `0.05`.
- **Vertical focus** (`cameraY`): -0.5 to 0.5. Default: `0.15`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/data-infinity) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "data-infinity",
    "colors": [
      "#020413",
      "#1759ff",
      "#ff27d8"
    ],
    "speed": 1,
    "density": 320,
    "spread": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/dotted-aura/

# Dotted Aura

A quiet circular aura emerges from a fine field of dots. Moving highlights travel around its rim; your cursor stirs a local wake and brightens nearby dots.

Category: **Pixels / halftone aura**.

[Open Dotted Aura in the live editor](/dotted-aura) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver aura**: `#050608`, `#626c7e`, `#f4f6fa`
- **Rose aura**: `#10050d`, `#a55e88`, `#fcd8ee`
- **Jade aura**: `#03120e`, `#50876e`, `#d6fbea`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Orbit speed** (`speed`): 0 to 2. Default: `0.35`.
- **Dot spacing** (`cellSize`): 2 to 24. Default: `4`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Halo width** (`ringWidth`): 12 to 140. Default: `24`.
- **Rim motion** (`amplitude`): 0 to 2. Default: `0.6`.
- **Tone levels** (`levels`): 2 to 12. Default: `8`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.3`.
- **Light diffusion** (`softness`): 0 to 1. Default: `0.2`.
- **Glints** (`turbulence`): 0 to 2. Default: `0.7`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.25`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/dotted-aura) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "dottedaura",
    "colors": [
      "#050608",
      "#626c7e",
      "#f4f6fa"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/drift/

# Drift

Layered dust floats at different depths. Your cursor gently parts the field, leaving a delayed luminous wake.

Category: **Particles / suspended dust**.

[Open Drift in the live editor](/drift) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Stardust**: `#0c1120`, `#67749a`, `#dce9ff`
- **Champagne dust**: `#18130f`, `#9a7b53`, `#f5dfb4`
- **Sea mist**: `#e7eee9`, `#8ba79d`, `#365f57`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Particles** (`particleCount`): 800 to 10000. Default: `2400`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Drift distance** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.55`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.5`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.35`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/drift) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "drift",
    "colors": [
      "#0c1120",
      "#67749a",
      "#dce9ff"
    ],
    "speed": 0.35,
    "particleCount": 2400,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/dune/

# Dune

Long wind-carved ridges fold into a soft dune field. Move the pointer to lift a sandbank and draw a trailing curve.

Category: **Topographic / wind ridges**.

[Open Dune in the live editor](/dune) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Desert ink**: `#1d1710`, `#7c6442`, `#d8bb85`
- **Chalk dunes**: `#eeeae0`, `#aaa28e`, `#6c745d`
- **Night dunes**: `#0b1620`, `#486c85`, `#c0d8e8`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.25`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `27`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Ridge height** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.45`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/dune) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "dune",
    "colors": [
      "#1d1710",
      "#7c6442",
      "#d8bb85"
    ],
    "speed": 0.25,
    "zoom": 1,
    "gridSpacing": 27,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/earth/

# Earth

Continents emerge from thousands of individual glowing dots on a rotating globe, with open oceans and no solid skin. Lines mode adds a fine spherical wireframe beneath the dotted continents, with no solid skin. Your cursor gently tilts the world.

Category: **3D / continental globe**.

[Open Earth in the live editor](/earth) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Blue planet**: `#040d18`, `#185b96`, `#79b98a`
- **Night atlas**: `#030919`, `#214f87`, `#87d5e8`
- **Rose world**: `#160b18`, `#784774`, `#e5acb6`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.18`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `40`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Continent dot size** (`dotSize`): 0.5 to 8. Default: `0.5`.
- **Form** (`amplitude`): 0 to 2. Default: `0`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.2`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/earth) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "earth",
    "colors": [
      "#040d18",
      "#185b96",
      "#79b98a"
    ],
    "speed": 0.18,
    "zoom": 1,
    "meshDetail": 40,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ember/

# Ember

Warm sparks rise with depth and flickering light. The pointer pushes them aside while a soft wake follows your movement.

Category: **Particles / rising sparks**.

[Open Ember in the live editor](/ember) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Fireside**: `#180e0b`, `#b05a2b`, `#ffd69b`
- **Rose sparks**: `#1b0b17`, `#a65077`, `#fbd1df`
- **Blue flame**: `#081520`, `#40889b`, `#c1f4ef`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.4`.
- **Particles** (`particleCount`): 800 to 10000. Default: `1800`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Wind** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.65`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.6`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.3`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/ember) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ember",
    "colors": [
      "#180e0b",
      "#b05a2b",
      "#ffd69b"
    ],
    "speed": 0.4,
    "particleCount": 1800,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ember-folds/

# Ember Folds

Stationary charcoal shapes form stacked folds or a touching pattern, with soft ember light creeping along their edges. Hover to draw the concealed light toward the cursor.

Category: **Light / illuminated folds**.

[Open Ember Folds in the live editor](/shaders/ember-folds) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ember**: `#17191b`, `#b83216`, `#ff8c39`
- **Copper**: `#19191b`, `#9e4d29`, `#efb47b`
- **Ultraviolet**: `#15151c`, `#6339ad`, `#bd9eff`

## Shader and camera controls

- **Shape (0 Circle, 1 Square, 2 Hexagon, 3 Rectangle)** (`shape`): 0 to 3. Default: `3`.
- **Layout (0 Stacked, 1 Pattern)** (`layout`): 0 to 1. Default: `0`.
- **Shape amount** (`shapeCount`): 3 to 24. Default: `7`.
- **Light creep speed** (`speed`): 0 to 1. Default: `0.22`.
- **Fold scale** (`scale`): 0.5 to 2. Default: `1`.
- **Fold angle** (`foldAngle`): 15 to 65. Default: `35`.
- **Shadow depth** (`foldDepth`): 0 to 1.5. Default: `0.75`.
- **Edge light** (`shaderGlow`): 0 to 2.5. Default: `1.1`.
- **Light spill** (`lightWidth`): 0.025 to 0.25. Default: `0.1`.
- **Film grain** (`grain`): 0 to 0.08. Default: `0.025`.
- **Hover light** (`interaction`): 0 to 2. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/ember-folds) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ember-folds",
    "colors": [
      "#17191b",
      "#b83216",
      "#ff8c39"
    ],
    "shape": 3,
    "layout": 0,
    "shapeCount": 7,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/event-horizon/

# Event Horizon

A black circular shadow framed by flowing accretion light and spiraling particles on a fixed black background. Color 1 controls the inner glow, color 2 the outer glow, and color 3 the stars and particles. Hover to disturb the nearby particle flow.

Category: **Space / accretion field**.

[Open Event Horizon in the live editor](/shaders/event-horizon) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Accretion Fire**: `#e04a0b`, `#ffe2a0`, `#ffe2a0`
- **Monochrome**: `#7c858e`, `#e9edf2`, `#e9edf2`
- **Blue Shift**: `#32678c`, `#83dcea`, `#83dcea`

## Shader and camera controls

- **Orbital flow** (`speed`): 0 to 1.5. Default: `0.45`.
- **Particle density** (`density`): 6 to 28. Default: `18`.
- **Particle size** (`lineWidth`): 0.3 to 1.6. Default: `0.9`.
- **Particle light** (`brightness`): 0.3 to 2. Default: `1`.
- **Dark sphere size** (`sphereSize`): 0.25 to 0.8. Default: `0.47`.
- **Horizon glow** (`rimGlow`): 0 to 2.5. Default: `1.25`.
- **Accretion flow** (`rimFlow`): 0 to 2. Default: `0.75`.
- **Hover gravity** (`interaction`): 0 to 2. Default: `0.7`.
- **Disk thickness** (`diskThickness`): 0.15 to 1.2. Default: `0.55`.
- **Light bending** (`lensing`): 0 to 1.5. Default: `0.8`.
- **Camera distance** (`cameraDistance`): 2.4 to 7. Default: `3.2`.
- **Viewing angle** (`viewAngle`): 12 to 50. Default: `40`.
- **Horizontal focus** (`focusX`): -0.3 to 0.3. Default: `0`.
- **Vertical focus** (`focusY`): -0.2 to 0.3. Default: `0`.
- **Disk rotation** (`diskRotation`): -90 to 90. Default: `-8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/event-horizon) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "event-horizon",
    "colors": [
      "#e04a0b",
      "#ffe2a0",
      "#ffe2a0"
    ],
    "speed": 0.45,
    "density": 18,
    "lineWidth": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/facet-field/

# Facet Field

A deep field of triangular facets catches a concentrated light, opening into a warm crystalline relief. Move your cursor to rake light across the folds.

Category: **Geometry / angular relief**.

[Open Facet Field in the live editor](/facet-field) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ember relief**: `#11071f`, `#591c11`, `#fc5818`
- **Glacial relief**: `#071321`, `#144b70`, `#74dbff`
- **Amethyst relief**: `#120920`, `#492177`, `#db80fa`

## Shader and camera controls

- **Light drift** (`speed`): 0 to 2. Default: `0.22`.
- **Facet size** (`gridSpacing`): 12 to 90. Default: `32`.
- **Relief depth** (`amplitude`): 0 to 2. Default: `1.3`.
- **Facet contrast** (`turbulence`): 0 to 2. Default: `1`.
- **Zoom** (`scale`): 0.3 to 3. Default: `1`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Mouse lighting** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/facet-field) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "facetfield",
    "colors": [
      "#11071f",
      "#591c11",
      "#fc5818"
    ],
    "speed": 0.22,
    "gridSpacing": 32,
    "amplitude": 1.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/fan/

# Fan

Soft rays open from a point below the frame. A slow pivot and drifting highlights give the light a sculptural, architectural feel.

Category: **Prism / spreading light**.

[Open Fan in the live editor](/fan) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Porcelain**: `#0b0c10`, `#8c93a3`, `#f1eeeb`
- **Apricot**: `#110b0d`, `#b38173`, `#ffe0ba`
- **Glacier**: `#060c12`, `#537e9b`, `#cde9fa`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.26`.
- **Scale** (`scale`): 0.3 to 3. Default: `0.85`.
- **Softness** (`softness`): 0 to 1. Default: `0.6`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.7`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.017`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/fan) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "fan",
    "colors": [
      "#0b0c10",
      "#8c93a3",
      "#f1eeeb"
    ],
    "speed": 0.26,
    "scale": 0.85,
    "softness": 0.6,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/fault-lines/

# Fault Lines

Irregular charcoal plates rise above deep illuminated seams. Slow shifts in elevation catch the studio light; hover to lift nearby plates and brighten their seams.

Category: **3D / illuminated plates**.

[Open Fault Lines in the live editor](/shaders/fault-lines) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Red Fault**: `#111b24`, `#8f0716`, `#ef1830`
- **Ember**: `#191b1f`, `#b13a0d`, `#ff802b`
- **Violet**: `#171722`, `#5f24a6`, `#bb6bff`

## Shader and camera controls

- **Plate density** (`plateCount`): 12 to 90. Default: `42`.
- **Seam width** (`gap`): 0.008 to 0.08. Default: `0.025`.
- **Plate relief** (`relief`): 0.2 to 1.8. Default: `0.9`.
- **Beveled edges** (`bevel`): 0.01 to 0.15. Default: `0.055`.
- **Seam light** (`shaderGlow`): 0 to 2. Default: `0.9`.
- **Depth drift** (`speed`): 0 to 1. Default: `0.35`.
- **Hover lift** (`interaction`): 0 to 1.5. Default: `0.65`.
- **Hover glow** (`hoverGlow`): 0 to 3. Default: `1.2`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/fault-lines) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "fault-lines",
    "colors": [
      "#111b24",
      "#8f0716",
      "#ef1830"
    ],
    "plateCount": 42,
    "gap": 0.025,
    "relief": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/filament/

# Filament

Fine upright strands sway in a continuous flow. Your cursor parts the lines and draws a soft, delayed fold through them.

Category: **Lines / flowing strands**.

[Open Filament in the live editor](/filament) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver threads**: `#0c1319`, `#587383`, `#cedfe8`
- **Copper threads**: `#1c1110`, `#886053`, `#dfbaa5`
- **Paper threads**: `#eae8e0`, `#9c9e8e`, `#525b54`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.3`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `18`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Flow bend** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.5`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/filament) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "filament",
    "colors": [
      "#0c1319",
      "#587383",
      "#cedfe8"
    ],
    "speed": 0.3,
    "zoom": 1,
    "gridSpacing": 18,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/firefly/

# Firefly

Six sparkling heads dart and wander independently, each leaving a short particle wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / wandering sparks**.

[Open Firefly in the live editor](/firefly) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Lime fireflies**: `#101a0c`, `#86aa43`, `#f2ffd2`
- **Amber fireflies**: `#20150a`, `#c49542`, `#ffebad`
- **Blue fireflies**: `#071825`, `#429ba8`, `#d1faff`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `1000`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.55`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.3`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.06`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.45`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/firefly) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "firefly",
    "colors": [
      "#101a0c",
      "#86aa43",
      "#f2ffd2"
    ],
    "speed": 0.3,
    "particleCount": 1000,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/flock/

# Flock

Loose ribbons of points move in a coordinated wave. Your cursor lifts the flock into a local curl and a trailing fold.

Category: **Particles / dancing ribbons**.

[Open Flock in the live editor](/flock) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver flock**: `#0b131c`, `#567891`, `#d9ecff`
- **Jade flock**: `#071914`, `#428571`, `#c6efdc`
- **Petal flock**: `#efe5e6`, `#b18a99`, `#674763`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Particles** (`particleCount`): 800 to 10000. Default: `5400`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Wave height** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.6`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.25`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.45`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/flock) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "flock",
    "colors": [
      "#0b131c",
      "#567891",
      "#d9ecff"
    ],
    "speed": 0.35,
    "particleCount": 5400,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/fog/

# Fog

Layered mist drifts through soft shafts of light. Your cursor parts and stirs the nearby fog.

Category: **Volume / illuminated mist**.

[Open Fog in the live editor](/fog) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moon haze**: `#0b1522`, `#55738a`, `#d1e1e8`
- **Rose haze**: `#20131c`, `#966b85`, `#f4d9db`
- **Jade haze**: `#0c211d`, `#609a88`, `#dcebd0`

## Shader and camera controls

- **Drift speed** (`speed`): 0 to 2. Default: `0.3`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Density** (`amplitude`): 0 to 2. Default: `0.8`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.7`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/fog) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "fog",
    "colors": [
      "#0b1522",
      "#55738a",
      "#d1e1e8"
    ],
    "speed": 0.3,
    "scale": 1,
    "amplitude": 0.8,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/fur/

# Fur

A dense field of tapered fibers catches soft studio light. Shaded roots and luminous tips reveal the depth of the pile; move your cursor to gently comb the strands.

Category: **Texture / soft fiber pile**.

[Open Fur in the live editor](/fur) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Cashmere**: `#30251e`, `#a58f75`, `#f5e8d4`
- **Silver mink**: `#172026`, `#83939e`, `#e6f0f1`
- **Ultraviolet**: `#160e31`, `#7956bd`, `#e9b8ef`

## Shader and camera controls

- **Pattern scale** (`furPatternScale`): 0.3 to 3. Default: `1`.
- **Pattern variation** (`furPatternVariation`): 0 to 1. Default: `0.65`.
- **Pattern contrast** (`furPatternContrast`): 0 to 1. Default: `1`.
- **Fur length** (`amplitude`): 0.1 to 1.8. Default: `0.9`.
- **Fiber density** (`gridSpacing`): 35 to 100. Default: `95`.
- **Strand thickness** (`lineWidth`): 0.3 to 1.8. Default: `1`.
- **Comb variation** (`turbulence`): 0 to 2. Default: `0.8`.
- **Softness** (`softness`): 0 to 1. Default: `0.45`.
- **Breeze** (`speed`): 0 to 1. Default: `0.5`.
- **Texture scale** (`scale`): fixed at 1. Default: `1`.
- **Comb strength** (`interaction`): 0 to 2. Default: `0.75`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): fixed at 0. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): fixed at 0. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): fixed at 1. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/fur) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "fur",
    "colors": [
      "#30251e",
      "#a58f75",
      "#f5e8d4"
    ],
    "furPatternScale": 1,
    "furPatternVariation": 0.65,
    "furPatternContrast": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/geodesic/

# Geodesic

A triangulated geodesic sphere breathes slowly. Its delicate facets rotate with your cursor and fade into darker edges on the far side.

Category: **3D / triangular sphere**.

[Open Geodesic in the live editor](/geodesic) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Titanium facets**: `#0e1319`, `#657c8c`, `#dce8ee`
- **Rose facets**: `#1c1016`, `#996775`, `#f3cbd6`
- **Jade facets**: `#091813`, `#4b8973`, `#c9f1dd`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.25`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `24`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Form** (`amplitude`): 0 to 2. Default: `0.6`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/geodesic) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "geodesic",
    "colors": [
      "#0e1319",
      "#657c8c",
      "#dce8ee"
    ],
    "speed": 0.25,
    "zoom": 1,
    "meshDetail": 24,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/glacial/

# Glacial

Thick, luminous ice refracts soft pigment beneath its surface. The cursor bends the glass and releases delicate fading ripples.

Category: **Organic / translucent ice**.

[Open Glacial in the live editor](/glacial) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Blue ice**: `#102942`, `#79aac8`, `#e4f8fa`
- **Lilac ice**: `#29263f`, `#ac9bbd`, `#faf0ed`
- **Frozen jade**: `#10332e`, `#79b6a3`, `#e8f9dc`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.24`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `0.8`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Refraction** (`softness`): 0 to 1. Default: `0.9`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/glacial) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "glacial",
    "colors": [
      "#102942",
      "#79aac8",
      "#e4f8fa"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.24,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/glass/

# Glass

Overlapping lenses follow with different weight, magnifying color locally and catching light along their rims.

Category: **Optics / lens**.

[Open Glass in the live editor](/glass) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Opal**: `#222344`, `#8b8bbd`, `#e9c9be`
- **Mint**: `#112e2c`, `#619489`, `#d7f0cd`
- **Peach**: `#462a39`, `#c18c92`, `#ffe3c2`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.3`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.33`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1.1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.018`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/glass) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "glass",
    "colors": [
      "#222344",
      "#8b8bbd",
      "#e9c9be"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/globe/

# Globe

A fine latitude-and-longitude globe turns in perspective. Cursor movement tilts its axis while front-facing meridians catch a soft highlight.

Category: **3D / latitude globe**.

[Open Globe in the live editor](/globe) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Celestial**: `#09131d`, `#477b96`, `#cceaf7`
- **Porcelain**: `#ede9df`, `#9b9884`, `#4b655e`
- **Moon globe**: `#131220`, `#706a9b`, `#ddd7f4`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.3`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `24`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Form** (`amplitude`): 0 to 2. Default: `0.35`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/globe) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "globe",
    "colors": [
      "#09131d",
      "#477b96",
      "#cceaf7"
    ],
    "speed": 0.3,
    "zoom": 1,
    "meshDetail": 24,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/halftone/

# Halftone

Staggered ink dots expand and contract with a rolling field. Your cursor lifts the print into a local highlight that softly settles.

Category: **Pixels / printing dots**.

[Open Halftone in the live editor](/halftone) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Editorial blue**: `#f1ece1`, `#354c72`, `#ce7357`
- **Plum print**: `#eee4df`, `#6f365d`, `#c87f9e`
- **Mint print**: `#e5ece2`, `#285f54`, `#86ad7a`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Pixel size** (`cellSize`): 2 to 120. Default: `14`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 12. Default: `6`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.3`.
- **Ink blend** (`softness`): 0 to 1. Default: `0.35`.
- **Flow detail** (`turbulence`): 0 to 2. Default: `0.5`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/halftone) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "halftone",
    "colors": [
      "#f1ece1",
      "#354c72",
      "#ce7357"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/halo/

# Halo

An elliptical ring breathes in the dark, carrying a silver highlight around its rim. Pointer movement gently shifts its center.

Category: **Prism / luminous ring**.

[Open Halo in the live editor](/halo) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moon**: `#080b10`, `#8793a6`, `#edf1f7`
- **Amber**: `#100b07`, `#b48c59`, `#ffe3a2`
- **Jade**: `#070f0d`, `#618f83`, `#d3f5df`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.3`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.5`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.015`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/halo) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "halo",
    "colors": [
      "#080b10",
      "#8793a6",
      "#edf1f7"
    ],
    "speed": 0.3,
    "scale": 1,
    "softness": 0.5,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/helix/

# Helix

Three braided particle trails drift around one another on slow, looping paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / braided particles**.

[Open Helix in the live editor](/helix) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Neon tubes**: `#090911`, `#f276d2`, `#66cce8`
- **Amber tubes**: `#130d0c`, `#f2a06b`, `#f8dbaa`
- **Glacial tubes**: `#0b131c`, `#719dd8`, `#d4edfa`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.35`.
- **Particles** (`particleCount`): 800 to 10000. Default: `4200`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.35`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.35`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.35`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.4`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/helix) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "tubes",
    "colors": [
      "#090911",
      "#f276d2",
      "#66cce8"
    ],
    "speed": 0.35,
    "particleCount": 4200,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/high-plains/

# High Plains

Fine wire terrain drifts through layered ridges. Hover to lift broad plateaus from the surface; the land settles gently when your cursor moves away.

Category: **Terrain / rising wire landscape**.

[Open High Plains in the live editor](/high-plains) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Blue altitude**: `#020508`, `#174e87`, `#9ddcff`
- **Silver terrain**: `#050609`, `#47515f`, `#e4edf6`
- **Violet elevation**: `#07040e`, `#56358d`, `#d5b4ff`

## Shader and camera controls

- **Terrain drift** (`speed`): 0 to 2. Default: `0.45`.
- **Ridge height** (`amplitude`): 0 to 2. Default: `1`.
- **Fine relief** (`turbulence`): 0 to 2. Default: `0.8`.
- **Wire density** (`meshDetail`): 8 to 48. Default: `40`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.4`.
- **Wire opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Depth visibility** (`fogDistance`): 6 to 40. Default: `18`.
- **Hover radius** (`gridRadius`): 40 to 320. Default: `130`.
- **Plateau lift** (`interaction`): 0 to 2. Default: `1`.
- **Camera height** (`cameraHeight`): 0.4 to 3. Default: `1.5`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.2`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/high-plains) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "highplains",
    "colors": [
      "#020508",
      "#174e87",
      "#9ddcff"
    ],
    "speed": 0.45,
    "amplitude": 1,
    "turbulence": 0.8,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/infinite-funnel/

# Infinite Funnel

An unbroken wireframe funnel bends into the distance. Rings flow toward you without a restart while the curved walls draw you deeper; move your cursor to shift the perspective.

Category: **Space / continuous wireframe funnel**.

[Open Infinite Funnel in the live editor](/infinite-funnel) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ultraviolet passage**: `#060916`, `#7966c5`, `#a4deed`
- **Rose current**: `#140916`, `#c567a7`, `#ffcbdd`
- **Lime continuum**: `#080f0a`, `#618e56`, `#d2f0aa`

## Shader and camera controls

- **Forward flow** (`speed`): 0 to 2. Default: `0.55`.
- **Grid density** (`meshDetail`): 8 to 48. Default: `28`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.9`.
- **Ring spacing** (`scale`): 0.3 to 3. Default: `1`.
- **Field of view** (`zoom`): 0.3 to 3. Default: `1`.
- **Tunnel bend** (`amplitude`): 0 to 2. Default: `1.05`.
- **Slow roll** (`turbulence`): 0 to 2. Default: `0.2`.
- **Rim light** (`softness`): 0 to 1. Default: `0.4`.
- **Depth visibility** (`fogDistance`): 6 to 40. Default: `26`.
- **Pointer steering** (`interaction`): 0 to 2. Default: `0.65`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/infinite-funnel) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "funnel",
    "colors": [
      "#060916",
      "#7966c5",
      "#a4deed"
    ],
    "speed": 0.55,
    "meshDetail": 28,
    "lineWidth": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ink-bloom/

# Ink Bloom

Ink continuously blooms outward from the center into a uniform solid color. Overlapping pigment fronts unfurl into translucent curls and feathered wisps, dissolving as fresh ink expands from within. Hover to diffuse and blend the pigment locally; the mixed areas linger and gradually settle.

Category: **Ink / flowing pigment**.

[Open Ink Bloom in the live editor](/shaders/ink-bloom) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Midnight in water**: `#e8faf7`, `#091d25`, `#5b427b`
- **Indigo wash**: `#f5f3ee`, `#172455`, `#6053a2`
- **Carmine bloom**: `#fcf4e9`, `#641832`, `#bd4960`

## Shader and camera controls

- **Bloom motion** (`speed`): 0 to 1.5. Default: `0.5`.
- **Bloom size** (`spread`): 0.35 to 1.5. Default: `1`.
- **Pigment density** (`amplitude`): 0.3 to 2.5. Default: `1.1`.
- **Liquid curl** (`turbulence`): 0.2 to 1.8. Default: `1`.
- **Feathered fingers** (`edgeGlow`): 0.2 to 1.8. Default: `1`.
- **Diffusion** (`softness`): 0 to 1. Default: `0.35`.
- **Zoom out** (`scale`): 0.6 to 1.6. Default: `1`.
- **Pigment mixing** (`interaction`): 0 to 1.5. Default: `0.7`.
- **Backlight** (`intensity`): 0.65 to 1.1. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -0.7 to 0.7. Default: `0`.
- **Vertical focus** (`cameraY`): -0.5 to 0.5. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/ink-bloom) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ink-bloom",
    "colors": [
      "#e8faf7",
      "#091d25",
      "#5b427b"
    ],
    "speed": 0.5,
    "spread": 1,
    "amplitude": 1.1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ion-tunnel/

# Ion Tunnel

Travel steadily through a continuous cave of electric filaments. Fixed, bumpy wall layers pass the camera with depth parallax and a circular opening ahead. Hover to energize nearby wires.

Category: **Space / electric wire cave**.

[Open Ion Tunnel in the live editor](/shaders/ion-tunnel) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Electric Blue**: `#02051b`, `#3056a2`, `#02dbf0`
- **Violet Arc**: `#080319`, `#65449c`, `#c78aff`
- **Solar**: `#100408`, `#94332b`, `#ffb347`

## Shader and camera controls

- **Walking speed** (`speed`): 0 to 1.5. Default: `0.5`.
- **Mesh density** (`ringCount`): 24 to 110. Default: `70`.
- **Tunnel depth** (`depth`): 10 to 28. Default: `12`.
- **Spiral twist** (`twist`): 0 to 2. Default: `0.7`.
- **Wall cragginess** (`turbulence`): 0 to 1.5. Default: `0.7`.
- **Filament width** (`lineWidth`): 0.3 to 1.6. Default: `0.7`.
- **Energy glow** (`shaderGlow`): 0 to 2. Default: `1.1`.
- **Hover energy** (`interaction`): 0 to 2. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/ion-tunnel) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ion-tunnel",
    "colors": [
      "#02051b",
      "#3056a2",
      "#02dbf0"
    ],
    "speed": 0.5,
    "ringCount": 70,
    "depth": 12,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/kinetic/

# Kinetic

An elastic grid gathers beneath the pointer. Click to send a bright, expanding wave through its lines and dots.

Category: **Grid / elastic dots**.

[Open Kinetic in the live editor](/kinetic) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Graphite**: `#101316`, `#39434d`, `#d7edf1`
- **Indigo**: `#101125`, `#394775`, `#b9cbff`
- **Parchment**: `#e9e3d9`, `#9c958b`, `#3f5658`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.28`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `36`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.5`.
- **Reach** (`gridRadius`): 40 to 320. Default: `160`.
- **Line width** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Click pulse** (`pulseStrength`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/kinetic) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "kinetic",
    "colors": [
      "#101316",
      "#39434d",
      "#d7edf1"
    ],
    "speed": 0.28,
    "gridSpacing": 36,
    "dotSize": 0.5,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/knot/

# Knot

A continuous torus knot loops through a fine three-dimensional mesh. Your cursor tilts the sculpture while highlights travel around its folds.

Category: **3D / woven wire knot**.

[Open Knot in the live editor](/knot) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Polar knot**: `#0a111e`, `#4867a1`, `#c2dbff`
- **Champagne knot**: `#181511`, `#9d8a63`, `#f4e6bc`
- **Petal knot**: `#1b101c`, `#a068a1`, `#f1d1ef`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.28`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `24`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Form** (`amplitude`): 0 to 2. Default: `0.4`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/knot) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "knot",
    "colors": [
      "#0a111e",
      "#4867a1",
      "#c2dbff"
    ],
    "speed": 0.28,
    "zoom": 1,
    "meshDetail": 24,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/lattice/

# Lattice

A precise diamond lattice stretches locally, revealing a cool highlight that follows your cursor with a delayed spring.

Category: **Grid / diamond mesh**.

[Open Lattice in the live editor](/lattice) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Blueprint**: `#0b1521`, `#294c68`, `#b7dff2`
- **Silver mesh**: `#121416`, `#59636c`, `#e7ebee`
- **Copper mesh**: `#1b1110`, `#74463a`, `#edc2a1`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `42`.
- **Line width** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Reach** (`gridRadius`): 40 to 320. Default: `165`.
- **Zoom** (`scale`): 0.3 to 3. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Click pulse** (`pulseStrength`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/lattice) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "lattice",
    "colors": [
      "#0b1521",
      "#294c68",
      "#b7dff2"
    ],
    "speed": 0.2,
    "gridSpacing": 42,
    "lineWidth": 0.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/lava/

# Lava

Glowing pools rise, drift together and pull apart into soft, rounded blobs. Randomized sizes and independent motion keep the liquid changing. Move your cursor to gently push the flow.

Category: **Organic / luminous metaballs**.

[Open Lava in the live editor](/lava) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Molten sunset**: `#100408`, `#f34b25`, `#ffd06b`
- **Ultraviolet**: `#080513`, `#7138e7`, `#fa84dd`
- **Acid glow**: `#030a09`, `#1dba86`, `#c4ff69`

## Shader and camera controls

- **Flow speed** (`speed`): 0 to 2. Default: `0.65`.
- **Blob count** (`meshDetail`): 8 to 24. Default: `14`.
- **Blob size** (`amplitude`): 0.4 to 1.6. Default: `1`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.8`.
- **Merging** (`softness`): 0 to 1. Default: `0.65`.
- **Wander** (`turbulence`): 0 to 2. Default: `0.65`.
- **Cursor push** (`interaction`): 0 to 2. Default: `0.65`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.25`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `18`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/lava) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "lava",
    "colors": [
      "#100408",
      "#f34b25",
      "#ffd06b"
    ],
    "speed": 0.65,
    "meshDetail": 14,
    "amplitude": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/liquid-chrome/

# Liquid Chrome

A slow-moving sheet of liquid chrome folds through dark pools and broad studio reflections. Move your cursor to press into the surface and draw a soft metallic wake.

Category: **Metal / flowing chrome**.

[Open Liquid Chrome in the live editor](/shaders/liquid-chrome) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Quicksilver**: `#080c13`, `#7b8a9e`, `#f4f7fa`
- **Rose alloy**: `#180c16`, `#b48199`, `#ffe5d5`
- **Ionic**: `#0b102a`, `#697bc4`, `#c4f3f1`

## Shader and camera controls

- **Flow speed** (`speed`): 0 to 2. Default: `0.42`.
- **Feature density** (`scale`): 0.3 to 3. Default: `1`.
- **Surface scale** (`zoom`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1.1`.
- **Flow detail** (`turbulence`): 0 to 2. Default: `0.6`.
- **Reflection softness** (`softness`): 0 to 1. Default: `0.2`.
- **Metal contrast** (`contrast`): 0.4 to 2.5. Default: `1.15`.
- **Specular highlights** (`edgeGlow`): 0 to 1.5. Default: `0.8`.
- **Iridescence** (`iridescence`): 0 to 1. Default: `0.12`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `-24`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `0.8`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `160`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/liquid-chrome) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "liquidchrome",
    "colors": [
      "#080c13",
      "#7b8a9e",
      "#f4f7fa"
    ],
    "speed": 0.42,
    "scale": 1,
    "zoom": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/liquid-droplets/

# Liquid Droplets

Glossy liquid pools rise from one continuous violet and pink surface. Drag your cursor to swirl and stretch the entire liquid field, blending pigment into flowing tendrils. Click to send a ripple through the pools.

Category: **Atmosphere / liquid flow surface**.

[Open Liquid Droplets in the live editor](/liquid-droplets) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Candy glass**: `#291283`, `#ff8afa`, `#a84bea`
- **Aquatic glass**: `#07395e`, `#88f2e5`, `#32a6d4`
- **Amber glass**: `#5b1834`, `#ffb68f`, `#de657d`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Float speed** (`speed`): 0 to 2. Default: `0.35`.
- **Liquid pools** (`levels`): 2 to 16. Default: `12`.
- **Pool size** (`zoom`): 0.3 to 3. Default: `1`.
- **Drift range** (`amplitude`): 0 to 2. Default: `0.8`.
- **Flow curls** (`turbulence`): 0 to 2. Default: `0.25`.
- **Color mixing** (`softness`): 0 to 1. Default: `0.25`.
- **Stir radius** (`gridRadius`): 40 to 320. Default: `140`.
- **Click ripple** (`pulseStrength`): 0 to 2. Default: `1`.
- **Liquid relief** (`opacity`): 0.1 to 1. Default: `0.98`.
- **Scene zoom** (`scale`): 0.3 to 3. Default: `1`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Stir strength** (`interaction`): 0 to 2. Default: `0.35`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.08`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/liquid-droplets) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "droplets",
    "colors": [
      "#291283",
      "#ff8afa",
      "#a84bea"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/liquid-laminar/

# Liquid Laminar

Coral and cobalt pigment flows beneath undulating glass. Surface normals bend the light while cursor pressure and a delayed wake sculpt the liquid.

Category: **Organic / refracted streams**.

[Open Liquid Laminar in the live editor](/liquid-laminar) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Coral current**: `#394cd6`, `#ff7e70`, `#e3eafa`
- **Lagoon current**: `#8362b0`, `#55b6b7`, `#e1f0e9`
- **Petal current**: `#976093`, `#df8aaa`, `#f2ece4`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.28`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Refraction** (`softness`): 0 to 1. Default: `0.8`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/liquid-laminar) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "laminar",
    "colors": [
      "#394cd6",
      "#ff7e70",
      "#e3eafa"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.28,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/logo-lab/

# Logo Lab

Sculpt the Striktly wordmark or your own SVG or transparent logo on a reflective studio stage. Soft shadows, cutout shading and studio lights reveal its depth. Move to tilt, or drag to rotate.

Category: **3D / extruded image logo**.

[Open Logo Lab in the live editor](/logo-lab) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver studio**: `#030507`, `#b4bdcb`, `#f8fcff`
- **Rose ceramic**: `#140b10`, `#db7f9e`, `#ffe7ef`
- **Opal metal**: `#09061a`, `#6571bc`, `#c9f5ff`

## Shader and camera controls

- **Turn speed** (`speed`): 0 to 2. Default: `0.35`.
- **Extrusion depth** (`logoDepth`): 0.04 to 0.5. Default: `0.2`.
- **Edge bevel** (`logoBevel`): 0 to 0.08. Default: `0`.
- **Front light** (`logoFrontLight`): 0 to 2. Default: `0.9`.
- **Shadow strength** (`logoShadow`): 0 to 1. Default: `0.85`.
- **Floor reflection** (`logoReflection`): 0 to 1. Default: `0.22`.
- **Reflection blur** (`logoReflectionBlur`): 0 to 1. Default: `0.35`.
- **Logo size** (`zoom`): 0.3 to 3. Default: `1`.
- **Surface roughness** (`softness`): 0 to 1. Default: `0.2`.
- **Cursor rotation** (`interaction`): 0 to 2. Default: `1`.
- **Studio light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/logo-lab) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "logolab",
    "colors": [
      "#030507",
      "#b4bdcb",
      "#f8fcff"
    ],
    "speed": 0.35,
    "logoDepth": 0.2,
    "logoBevel": 0,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/membrane/

# Membrane

A stretched pearlescent skin catches soft studio light. Cursor pressure creates a local depression with a spring-soft rebound.

Category: **Organic / pearlescent skin**.

[Open Membrane in the live editor](/membrane) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Pearl skin**: `#352c41`, `#bf94ad`, `#ffe4d3`
- **Sea pearl**: `#153733`, `#72a99e`, `#edebc9`
- **Moon skin**: `#232d4b`, `#8199c7`, `#f3e7f8`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Surface diffusion** (`softness`): 0 to 1. Default: `0.55`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/membrane) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "membrane",
    "colors": [
      "#352c41",
      "#bf94ad",
      "#ffe4d3"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.2,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/mercury/

# Mercury

Broad rounded folds carry polished reflections. Cursor pressure dents the metal and leaves a weighty reflective wake.

Category: **Organic / liquid metal**.

[Open Mercury in the live editor](/mercury) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver pool**: `#0b111a`, `#697d91`, `#f0f3f1`
- **Rose alloy**: `#201019`, `#a37486`, `#f9d7cc`
- **Petrol metal**: `#071918`, `#417c78`, `#d4fae7`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.22`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Surface diffusion** (`softness`): 0 to 1. Default: `0.6`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/mercury) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "mercury",
    "colors": [
      "#0b111a",
      "#697d91",
      "#f0f3f1"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.22,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/meridian/

# Meridian

Nested orbital contours breathe around a quiet center. The pointer bends the rings locally while a soft wake trails behind.

Category: **Lines / orbital contours**.

[Open Meridian in the live editor](/meridian) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moon rings**: `#10121c`, `#666b89`, `#d4d7ed`
- **Bronze rings**: `#1c140e`, `#826b4d`, `#e0c49a`
- **Porcelain rings**: `#eeeaf0`, `#a49bb1`, `#665972`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `26`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Ripple** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.35`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/meridian) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "meridian",
    "colors": [
      "#10121c",
      "#666b89",
      "#d4d7ed"
    ],
    "speed": 0.2,
    "zoom": 1,
    "gridSpacing": 26,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/mesh-ribbon/

# Mesh Ribbon

Fine colored strands twist into a soft, open mesh wave. Slow folds change its silhouette while your cursor gently lifts nearby threads and leaves a delayed wake.

Category: **Lines / flowing wireframe ribbon**.

[Open Mesh Ribbon in the live editor](/mesh-ribbon) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Iridescent threads**: `#f7f8fb`, `#ee65a0`, `#7861d5`
- **Midnight weave**: `#07121d`, `#47b6c0`, `#b58bff`
- **Solar threads**: `#160e16`, `#f68a6d`, `#d76cbe`

## Shader and camera controls

- **Motion speed** (`speed`): 0 to 2. Default: `0.35`.
- **Ribbon span** (`zoom`): 0.3 to 3. Default: `1.7`.
- **Strand density** (`meshDetail`): 8 to 48. Default: `40`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Twist** (`amplitude`): 0 to 2. Default: `1`.
- **Ripples** (`turbulence`): 0 to 2. Default: `0.45`.
- **Cross threads** (`softness`): 0 to 1. Default: `0.18`.
- **Cursor lift** (`interaction`): 0 to 2. Default: `0.9`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/mesh-ribbon) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "meshribbon",
    "colors": [
      "#f7f8fb",
      "#ee65a0",
      "#7861d5"
    ],
    "speed": 0.35,
    "zoom": 1.7,
    "meshDetail": 40,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/moire/

# Moiré

Overlapping fine gratings create broad interference waves. Your cursor changes their local alignment and opens rippling bands.

Category: **Optics / interference**.

[Open Moiré in the live editor](/moire) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver interference**: `#0d131d`, `#536b82`, `#d8e7f0`
- **Warm interference**: `#211710`, `#907e5d`, `#e7dfbd`
- **Iris interference**: `#171129`, `#7960a5`, `#d9ccec`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Grating period** (`gridSpacing`): 16 to 100. Default: `18`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Cursor twist** (`interaction`): 0 to 2. Default: `0.9`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.08`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/moire) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "moire",
    "colors": [
      "#0d131d",
      "#536b82",
      "#d8e7f0"
    ],
    "speed": 0.2,
    "scale": 1,
    "gridSpacing": 18,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/mosaic/

# Mosaic

Small glazed tiles catch shifting color and a fine edge highlight. Your pointer swirls the mosaic into a coherent, delayed wave.

Category: **Pixels / glazed tiles**.

[Open Mosaic in the live editor](/mosaic) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Night ceramics**: `#0b1725`, `#306781`, `#b0dce0`
- **Copper ceramics**: `#211711`, `#9c6040`, `#f1c595`
- **Orchid ceramics**: `#180f25`, `#755995`, `#d9b4e8`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Pixel size** (`cellSize`): 2 to 120. Default: `22`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 12. Default: `8`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.3`.
- **Tile gaps** (`softness`): 0 to 1. Default: `0.4`.
- **Flow detail** (`turbulence`): 0 to 2. Default: `0.5`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/mosaic) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "mosaic",
    "colors": [
      "#0b1725",
      "#306781",
      "#b0dce0"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/obsidian-burst/

# Obsidian Burst

A dense cluster of sharp obsidian shards turns in darkness, catching restrained blue-gray reflections and amber glints. Your cursor rotates the sculpture.

Category: **3D / fractured crystal**.

[Open Obsidian Burst in the live editor](/obsidian-burst) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Obsidian**: `#020304`, `#223136`, `#c59b4a`
- **Black ice**: `#02060a`, `#1a334b`, `#6db5ee`
- **Garnet**: `#090306`, `#442331`, `#ec736f`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.24`.
- **Shard length** (`amplitude`): 0 to 2. Default: `1.25`.
- **Object size** (`zoom`): 0.3 to 3. Default: `0.78`.
- **Polish** (`softness`): 0 to 1. Default: `0.15`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Mouse rotation** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.06`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/obsidian-burst) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "crystalburst",
    "colors": [
      "#020304",
      "#223136",
      "#c59b4a"
    ],
    "speed": 0.24,
    "amplitude": 1.25,
    "zoom": 0.78,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/oilskin/

# Oilskin

A dark liquid surface reveals shifting thin-film color in its reflective folds. Slow cursor pressure stretches the sheen into a lingering wake.

Category: **Organic / iridescent film**.

[Open Oilskin in the live editor](/oilskin) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Violet petrol**: `#070b13`, `#684db1`, `#75d1b8`
- **Burnished oil**: `#130d14`, `#b35773`, `#d7bc6d`
- **Electric slick**: `#070f16`, `#2b91a4`, `#aa87e3`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.18`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Surface diffusion** (`softness`): 0 to 1. Default: `0.6`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/oilskin) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "oilskin",
    "colors": [
      "#070b13",
      "#684db1",
      "#75d1b8"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.18,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/orbit/

# Orbit

Four spiraling arms turn at different speeds around a quiet center. The pointer twists nearby stars into a brief orbital eddy.

Category: **Particles / spiral galaxy**.

[Open Orbit in the live editor](/orbit) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Andromeda**: `#0c091c`, `#705b9e`, `#e9d6ff`
- **Blue orbit**: `#071421`, `#487b9d`, `#d7f1ff`
- **Solar dust**: `#1d100f`, `#a66c50`, `#ffe3ae`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `4800`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Spiral twist** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.4`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.3`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.45`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/orbit) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "orbit",
    "colors": [
      "#0c091c",
      "#705b9e",
      "#e9d6ff"
    ],
    "speed": 0.3,
    "particleCount": 4800,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/photon-fabric/

# Photon Fabric

A regular lattice of luminous dots folds into a flowing wave. Blue shadows meet bright warm crests, while foreground points soften through depth. Your cursor lifts and swirls the local fabric.

Category: **Particles / luminous folded fabric**.

[Open Photon Fabric in the live editor](/photon-fabric) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Neon silk**: `#02030b`, `#243ac6`, `#ff678e`
- **Polar fabric**: `#020d16`, `#195b9e`, `#7df0e5`
- **Solar fabric**: `#10040c`, `#7546b5`, `#ffb070`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.4`.
- **Particles** (`particleCount`): 800 to 10000. Default: `10000`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Fold height** (`amplitude`): 0 to 2. Default: `1`.
- **Fold detail** (`turbulence`): 0 to 2. Default: `0.6`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.65`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.7`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.9`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1.2`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.04`.
- **Spread** (`spread`): 0.3 to 2. Default: `1.15`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/photon-fabric) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "photonfabric",
    "colors": [
      "#02030b",
      "#243ac6",
      "#ff678e"
    ],
    "speed": 0.4,
    "particleCount": 10000,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/plasma-halo/

# Plasma Halo

A luminous plasma ring bends through a crisp pixel field. Its rim breathes and fractures into tonal cells as the cursor stirs the energy; optional edge light frames the scene.

Category: **Pixels / dithered plasma**.

[Open Plasma Halo in the live editor](/plasma-halo) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Electric blue**: `#02080e`, `#0873c4`, `#20c8ff`
- **Violet plasma**: `#0a0413`, `#7050c2`, `#c68cff`
- **Solar plasma**: `#130703`, `#ce642e`, `#ffd69a`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Orbit speed** (`speed`): 0 to 2. Default: `0.3`.
- **Pixel size** (`cellSize`): 2 to 24. Default: `4`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Halo width** (`ringWidth`): 12 to 140. Default: `32`.
- **Rim motion** (`amplitude`): 0 to 2. Default: `1.1`.
- **Tone levels** (`levels`): 2 to 12. Default: `6`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.25`.
- **Light diffusion** (`softness`): 0 to 1. Default: `0.6`.
- **Plasma detail** (`turbulence`): 0 to 2. Default: `0.7`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Edge light** (`edgeGlow`): 0 to 1.5. Default: `0.45`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.3`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/plasma-halo) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "plasmahalo",
    "colors": [
      "#02080e",
      "#0873c4",
      "#20c8ff"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/point-form/

# Point Form

Organic ink dots bloom from the bottom upward, spreading in uneven clusters across a flat field. Each dot grows at its own pace; hover to encourage the ink around your cursor.

Category: **Ink / organic dot growth**.

[Open Point Form in the live editor](/shaders/point-form) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Ink on paper**: `#ffffff`, `#242424`, `#000000`
- **After hours**: `#080a0f`, `#555a71`, `#eeeaff`
- **Cobalt print**: `#f4f2ea`, `#849fdd`, `#173fbb`

## Shader and camera controls

- **Growth speed** (`speed`): 0 to 2. Default: `0.6`.
- **Dots** (`particleCount`): 1600 to 10000. Default: `10000`.
- **Dot size** (`dotSize`): 0.5 to 3. Default: `1`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Dot growth** (`amplitude`): 0 to 1.6. Default: `1`.
- **Ink spread** (`turbulence`): 0 to 2. Default: `0.6`.
- **Dot softness** (`softness`): 0 to 1. Default: `0.12`.
- **Hover growth** (`interaction`): 0 to 2. Default: `0.7`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `170`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `1`.
- **Spread** (`spread`): 0.6 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.1. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/point-form) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "pointform",
    "colors": [
      "#ffffff",
      "#242424",
      "#000000"
    ],
    "speed": 0.6,
    "particleCount": 10000,
    "dotSize": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/prism/

# Prism

An oblique sheet of violet, pink and blue light drifts across a dark field, with fine grain and a weighty pointer glide.

Category: **Light / prismatic sheet**.

[Open Prism in the live editor](/prism) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Afterglow**: `#1b0b3b`, `#ed72d6`, `#628fff`
- **Pearl**: `#0b0908`, `#978c7c`, `#eee7da`
- **Arctic**: `#070a0c`, `#6d8799`, `#d7e9f3`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.4`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.5`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.015`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/prism) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "prism",
    "colors": [
      "#1b0b3b",
      "#ed72d6",
      "#628fff"
    ],
    "speed": 0.4,
    "scale": 1,
    "softness": 0.5,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/proximity/

# Proximity

A field of fine dots grows into a soft proximity mask beneath your cursor. Click waves bloom outward and slowly dissolve.

Category: **Grid / growing dots**.

[Open Proximity in the live editor](/proximity) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Paper**: `#e5dfd7`, `#645d56`, `#c87558`
- **Ink**: `#111416`, `#647378`, `#cfe7df`
- **Blush**: `#f1e1df`, `#aa827f`, `#683d4b`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `32`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.5`.
- **Reach** (`gridRadius`): 40 to 320. Default: `145`.
- **Growth** (`growth`): 0 to 36. Default: `20`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Click pulse** (`pulseStrength`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.002`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/proximity) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "proximity",
    "colors": [
      "#e5dfd7",
      "#645d56",
      "#c87558"
    ],
    "speed": 0,
    "gridSpacing": 32,
    "dotSize": 0.5,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/reaction-diffusion/

# Reaction Diffusion

A small GPU reaction-diffusion simulation grows branching cultures and winding labyrinths. Move your cursor to seed new pigment into the evolving field.

Category: **Simulation / growing patterns**.

[Open Reaction Diffusion in the live editor](/reaction-diffusion) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Petri jade**: `#08191b`, `#55a995`, `#dbefb3`
- **Coral culture**: `#241323`, `#c36e88`, `#f6cba9`
- **Cobalt culture**: `#0b1730`, `#5c88c1`, `#d5e9f2`

## Shader and camera controls

- **Growth speed** (`speed`): 0 to 2. Default: `0.4`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Feed** (`feed`): 0.01 to 0.08. Default: `0.055`.
- **Kill** (`kill`): 0.03 to 0.075. Default: `0.062`.
- **Brush radius** (`gridRadius`): 40 to 320. Default: `55`.
- **Brush strength** (`interaction`): 0 to 2. Default: `0.55`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/reaction-diffusion) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "reaction",
    "colors": [
      "#08191b",
      "#55a995",
      "#dbefb3"
    ],
    "speed": 0.4,
    "scale": 1,
    "feed": 0.055,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/refracted-glass/

# Refracted Glass

Sculptural glass objects catch cyan, violet and pink studio reflections. Choose a cube, sphere, triangular frame, pyramid or looping sculpture; your cursor rotates the glass and reveals its changing reflections.

Category: **3D / sculptural glass**.

[Open Refracted Glass in the live editor](/refracted-glass) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Studio**: `#dde5f3`, `#495bdb`, `#55dfff`
- **Nocturne**: `#040609`, `#424fff`, `#73ddff`
- **Rose quartz**: `#c8b6b9`, `#856a80`, `#fff0ed`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Object rotation** (`speed`): 0 to 2. Default: `0.25`.
- **Object size** (`scale`): 0.3 to 2. Default: `1`.
- **Bevel thickness** (`lineWidth`): 0.3 to 3. Default: `0.6`.
- **Refraction** (`amplitude`): 0 to 2. Default: `1`.
- **Dispersion** (`turbulence`): 0 to 2. Default: `1.1`.
- **Frosting** (`softness`): 0 to 1. Default: `0.04`.
- **Glass opacity** (`opacity`): 0.1 to 1. Default: `0.95`.
- **Rim highlights** (`edgeGlow`): 0 to 1.5. Default: `0.6`.
- **Behind-shape glow** (`backGlow`): 0 to 2. Default: `0.65`.
- **Backdrop glow size** (`backGlowRadius`): 0.1 to 1.2. Default: `0.42`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Mouse steering** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/refracted-glass) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "refraction",
    "colors": [
      "#dde5f3",
      "#495bdb",
      "#55dfff"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.25,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ribbon/

# Ribbon

A slender ribbon of light folds across a dark field. Its curved edge follows your cursor with a soft, weighty glide.

Category: **Prism / curved ribbon**.

[Open Ribbon in the live editor](/ribbon) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Platinum**: `#090b0e`, `#718398`, `#d9e5f2`
- **Rose gold**: `#100909`, `#ad8074`, `#f4dbb8`
- **Iris**: `#0c0913`, `#8873ad`, `#e4d4fa`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.34`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Softness** (`softness`): 0 to 1. Default: `0.4`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.85`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.018`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/ribbon) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ribbon",
    "colors": [
      "#090b0e",
      "#718398",
      "#d9e5f2"
    ],
    "speed": 0.34,
    "scale": 1,
    "softness": 0.4,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/ridgeline/

# Ridgeline

Fly through a valley of glowing wireframe ridges. A scan pulse travels across the landscape as distant peaks fade into fog. Your cursor leans and glides the camera.

Category: **Grid / 3D wireframe flyover**.

[Open Ridgeline in the live editor](/ridgeline) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Copper ridges**: `#0b0907`, `#996448`, `#ffb76c`
- **Blue ridges**: `#050b16`, `#3f6ca5`, `#a7eaff`
- **Jade ridges**: `#03100d`, `#329b7d`, `#b2ffce`

## Shader and camera controls

- **Flight speed** (`speed`): 0 to 2. Default: `0.65`.
- **Grid density** (`meshDetail`): 8 to 48. Default: `28`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Mountain relief** (`amplitude`): 0 to 2. Default: `1.1`.
- **Ridge detail** (`turbulence`): 0 to 2. Default: `0.7`.
- **Camera height** (`cameraHeight`): 0.4 to 3. Default: `1.2`.
- **Fog distance** (`fogDistance`): 6 to 40. Default: `18`.
- **Scan glow** (`scanStrength`): 0 to 2. Default: `0.8`.
- **Scan pace** (`scanRate`): 0.1 to 3. Default: `1`.
- **Pointer steering** (`interaction`): 0 to 2. Default: `1`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.25`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/ridgeline) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "ridgeline",
    "colors": [
      "#0b0907",
      "#996448",
      "#ffb76c"
    ],
    "speed": 0.65,
    "meshDetail": 28,
    "lineWidth": 0.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/riso-dither/

# Riso Dither

Wind-swept ribbons resolve into a crisp Bayer dither pattern. Cursor movement bends the flow and draws a brighter core through the ink.

Category: **Pixels / ordered ink**.

[Open Riso Dither in the live editor](/riso-dither) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Electric ink**: `#0b1025`, `#7054c8`, `#ffcdac`
- **Riso mint**: `#0b2529`, `#399f8c`, `#e5e7aa`
- **Rose ink**: `#271127`, `#b06e9e`, `#f7d4b3`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.35`.
- **Pixel size** (`cellSize`): 2 to 120. Default: `4`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Tone levels** (`levels`): 2 to 12. Default: `3`.
- **Contrast** (`contrast`): 0.4 to 2.5. Default: `1.35`.
- **Ribbon bend** (`amplitude`): 0 to 2. Default: `0.3`.
- **Dither strength** (`turbulence`): 0 to 1. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/riso-dither) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "dither",
    "colors": [
      "#0b1025",
      "#7054c8",
      "#ffcdac"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/rorschach/

# Rorschach

Mirrored inkblots slowly bloom, join and pull apart around a central fold. Feathered edges and pools of pigment keep each shape organic; move your cursor to gently reshape both sides at once.

Category: **Ink / mirrored morphing forms**.

[Open Rorschach in the live editor](/shaders/rorschach) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Inkblot**: `#f7f5ef`, `#38332f`, `#11100f`
- **Oxblood**: `#f2e8dc`, `#7f3545`, `#300d22`
- **Cobalt stain**: `#eef2f5`, `#476eb3`, `#102b69`

## Shader and camera controls

- **Morph speed** (`speed`): 0 to 2. Default: `0.6`.
- **Ink lobes** (`meshDetail`): 8 to 24. Default: `12`.
- **Ink spread** (`amplitude`): 0.3 to 1.7. Default: `1`.
- **Lobe variation** (`sizeVariation`): 0 to 1. Default: `0.75`.
- **Edge detail** (`turbulence`): 0 to 2. Default: `0.7`.
- **Ink bleed** (`softness`): 0 to 1. Default: `0.25`.
- **Blot size** (`zoom`): 0.5 to 2. Default: `0.78`.
- **Cursor shaping** (`interaction`): 0 to 2. Default: `0.55`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/rorschach) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "rorschach",
    "colors": [
      "#f7f5ef",
      "#38332f",
      "#11100f"
    ],
    "speed": 0.6,
    "meshDetail": 12,
    "amplitude": 1,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/silk/

# Silk

Slow satin folds shear beneath your cursor, catching a highlight that stretches into a soft trailing wake.

Category: **Fluid / fabric**.

[Open Silk in the live editor](/silk) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Coastal**: `#10283c`, `#608c9a`, `#eddfc8`
- **Rosewater**: `#311a32`, `#a66c8f`, `#f8d7ca`
- **Dune**: `#302820`, `#9b8464`, `#f0d8a5`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.32`.
- **Scale** (`scale`): 0.3 to 3. Default: `1.15`.
- **Softness** (`softness`): 0 to 1. Default: `0.42`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.75`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.045`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/silk) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "silk",
    "colors": [
      "#10283c",
      "#608c9a",
      "#eddfc8"
    ],
    "speed": 0.32,
    "scale": 1.15,
    "softness": 0.42,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/soft-cells/

# Soft Cells

Bubbles of different sizes drift together, squeeze past their neighbors and open into soft, rounded connections. Independent motion keeps the cells mixing; move your cursor to gently stir them.

Category: **Geometry / mixing soft cells**.

[Open Soft Cells in the live editor](/soft-cells) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Black and white**: `#ffffff`, `#e8e8e8`, `#000000`
- **Acid ink**: `#182821`, `#345c40`, `#cbff79`
- **Cobalt cream**: `#1744cc`, `#426ff0`, `#fff2d2`

## Shader and camera controls

- **Mixing speed** (`speed`): 0 to 2. Default: `0.65`.
- **Cell count** (`meshDetail`): 8 to 40. Default: `16`.
- **Rounded junctions** (`softness`): 0 to 1. Default: `0.35`.
- **Outline weight** (`lineWidth`): 0.3 to 3. Default: `1`.
- **Mixing range** (`amplitude`): 0 to 2. Default: `1`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.85`.
- **Fill variation** (`turbulence`): 0 to 1. Default: `0`.
- **Cell zoom** (`zoom`): 0.3 to 3. Default: `0.9`.
- **Pointer stirring** (`interaction`): 0 to 2. Default: `0.65`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/soft-cells) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "softcells",
    "colors": [
      "#ffffff",
      "#e8e8e8",
      "#000000"
    ],
    "speed": 0.65,
    "meshDetail": 16,
    "softness": 0.35,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/soft-resin/

# Soft Resin

Rounded translucent forms merge into a soft liquid body. Cursor attraction slowly pulls the resin while highlights describe its thickness.

Category: **Organic / viscous lenses**.

[Open Soft Resin in the live editor](/soft-resin) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Honey resin**: `#251624`, `#c99463`, `#ffead0`
- **Opal resin**: `#152939`, `#71a5b2`, `#efdfeb`
- **Berry resin**: `#24132d`, `#b775a8`, `#f6d9df`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.18`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Refraction** (`softness`): 0 to 1. Default: `0.85`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/soft-resin) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "resin",
    "colors": [
      "#251624",
      "#c99463",
      "#ffead0"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.18,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/sonar/

# Sonar

Soft rings brighten a precise dot field. striktly pings arrive slowly; click anywhere to add your own expanding signal.

Category: **Grid / expanding signals**.

[Open Sonar in the live editor](/sonar) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Violet signal**: `#0d101d`, `#343b5d`, `#a3a8fa`
- **Cloud**: `#edf0f7`, `#99a2b9`, `#626cd4`
- **Coral signal**: `#190f17`, `#5e354a`, `#e6a3ab`

## Shader and camera controls

- **Wave speed** (`pulseSpeed`): 60 to 400. Default: `260`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `28`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.5`.
- **Ring width** (`ringWidth`): 12 to 140. Default: `90`.
- **Ping interval** (`pingEvery`): 1 to 8. Default: `2.4`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Click pulse** (`pulseStrength`): 0 to 2. Default: `1.2`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.002`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/sonar) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "sonar",
    "colors": [
      "#0d101d",
      "#343b5d",
      "#a3a8fa"
    ],
    "pulseSpeed": 260,
    "gridSpacing": 28,
    "dotSize": 0.5,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/spectral-glass/

# Spectral Glass

Dark, irregular glass panels catch drifting red and blue light. Thin prismatic seams split into spectral highlights, while softer reflections travel behind the glass. Hover to draw light into nearby panels.

Category: **Light / prismatic panels**.

[Open Spectral Glass in the live editor](/shaders/spectral-glass) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Chromatic Night**: `#030406`, `#e51924`, `#1640eb`
- **Amber Prism**: `#070506`, `#e43d1c`, `#b177df`
- **Aurora Glass**: `#020608`, `#0ca796`, `#4877ec`

## Shader and camera controls

- **Panel density** (`panels`): 4 to 28. Default: `9`.
- **Light drift** (`speed`): 0 to 1.5. Default: `0.35`.
- **Color separation** (`dispersion`): 0 to 1.5. Default: `0.75`.
- **Light intensity** (`spectralGlow`): 0 to 2. Default: `1`.
- **Reflection softness** (`softness`): 0 to 1. Default: `0.6`.
- **Streak length** (`streakLength`): 0.2 to 1.5. Default: `0.65`.
- **Panel angle** (`angle`): -45 to 45. Default: `0`.
- **Film grain** (`grain`): 0 to 0.04. Default: `0.009`.
- **Hover light** (`interaction`): 0 to 2. Default: `0.7`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/spectral-glass) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "spectral-glass",
    "colors": [
      "#030406",
      "#e51924",
      "#1640eb"
    ],
    "panels": 9,
    "speed": 0.35,
    "dispersion": 0.75,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/strata/

# Strata

Quiet horizontal layers form rolling horizons. A local cursor lift gives their fine lines a soft, tactile response.

Category: **Lines / layered horizons**.

[Open Strata in the live editor](/strata) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Slate layers**: `#10151d`, `#57687c`, `#c5d0e1`
- **Sediment**: `#ece6db`, `#a99781`, `#6c5b49`
- **Jade layers**: `#0b1916`, `#456e62`, `#b3d7c7`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.2`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `22`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Layer height** (`amplitude`): 0 to 2. Default: `1`.
- **Detail** (`turbulence`): 0 to 2. Default: `0.55`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.006`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/strata) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "strata",
    "colors": [
      "#10151d",
      "#57687c",
      "#c5d0e1"
    ],
    "speed": 0.2,
    "zoom": 1,
    "gridSpacing": 22,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/stream/

# Stream

Fine luminous streaks travel in parallel currents. Cursor movement parts the flow and pulls a soft directional wake.

Category: **Particles / flowing currents**.

[Open Stream in the live editor](/stream) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver current**: `#0c1418`, `#587580`, `#d4edf2`
- **Electric current**: `#0b1022`, `#546da0`, `#bfd6ff`
- **Pearl current**: `#eeeae3`, `#9a958b`, `#465d65`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.45`.
- **Particles** (`particleCount`): 800 to 10000. Default: `3200`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Flow bend** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.6`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.25`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/stream) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "stream",
    "colors": [
      "#0c1418",
      "#587580",
      "#d4edf2"
    ],
    "speed": 0.45,
    "particleCount": 3200,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/terrain/

# Terrain

A receding wire grid rolls gently toward the horizon. Pointer movement lifts the surface; clicks travel across it as light waves.

Category: **Grid / perspective field**.

[Open Terrain in the live editor](/terrain) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Horizon**: `#0b1020`, `#334674`, `#a9c7f3`
- **Desert**: `#171117`, `#76565d`, `#edc1a5`
- **Teal field**: `#071719`, `#2b676a`, `#a6e8de`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.3`.
- **Spacing** (`gridSpacing`): 16 to 100. Default: `46`.
- **Line width** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Reach** (`gridRadius`): 40 to 320. Default: `175`.
- **Zoom** (`scale`): 0.3 to 3. Default: `1`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Click pulse** (`pulseStrength`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.003`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/terrain) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "terrain",
    "colors": [
      "#0b1020",
      "#334674",
      "#a9c7f3"
    ],
    "speed": 0.3,
    "gridSpacing": 46,
    "lineWidth": 0.3,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/tidal-glass/

# Tidal Glass

Overlapping water swells refract a smoky luminous bed. Moving the cursor adds a pressure hollow and small expanding wavelets.

Category: **Organic / shallow water**.

[Open Tidal Glass in the live editor](/tidal-glass) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Smoky lagoon**: `#082127`, `#4c9d9b`, `#daece1`
- **Rosewater tide**: `#311a29`, `#b0778f`, `#f3dbca`
- **Deep blue tide**: `#0b1c38`, `#4f80be`, `#c9e6fa`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.38`.
- **Scale** (`scale`): 0.3 to 3. Default: `1`.
- **Surface relief** (`amplitude`): 0 to 2. Default: `1`.
- **Surface detail** (`turbulence`): 0 to 2. Default: `0.65`.
- **Refraction** (`softness`): 0 to 1. Default: `0.9`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/tidal-glass) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "tidal",
    "colors": [
      "#082127",
      "#4c9d9b",
      "#daece1"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.38,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/tide/

# Tide

Thousands of fine points form a rolling, tilted wave field. Move your cursor to lift a local crest and draw a soft wake.

Category: **Particles / rolling waves**.

[Open Tide in the live editor](/tide) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moonwater**: `#091321`, `#477787`, `#d4eef2`
- **Lilac tide**: `#131023`, `#716a9d`, `#e4d6ff`
- **Sandbar**: `#eee8dc`, `#9b8972`, `#475d66`

## Shader and camera controls

- **Speed** (`speed`): 0 to 2. Default: `0.4`.
- **Particles** (`particleCount`): 800 to 10000. Default: `6400`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Wave height** (`amplitude`): 0 to 2. Default: `1`.
- **Scatter** (`turbulence`): 0 to 2. Default: `0.5`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.22`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.55`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/tide) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "tide",
    "colors": [
      "#091321",
      "#477787",
      "#d4eef2"
    ],
    "speed": 0.4,
    "particleCount": 6400,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/torus/

# Torus

A sculptural ring turns through a precise wire mesh. Perspective, quiet breathing, and an eased cursor tilt reveal its depth.

Category: **3D / wire torus**.

[Open Torus in the live editor](/torus) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Silver ring**: `#0b1518`, `#5d8b94`, `#d9eff1`
- **Copper ring**: `#1b110d`, `#a77c50`, `#f5d8ae`
- **Lavender ring**: `#151021`, `#7866a0`, `#e0d5f7`

## Shader and camera controls

- **Rotation** (`speed`): 0 to 2. Default: `0.32`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Detail** (`meshDetail`): 8 to 48. Default: `24`.
- **Line weight** (`lineWidth`): 0.3 to 3. Default: `0.3`.
- **Form** (`amplitude`): 0 to 2. Default: `0.35`.
- **Back edges** (`softness`): 0 to 1. Default: `0.35`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor tilt** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/torus) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "torus",
    "colors": [
      "#0b1518",
      "#5d8b94",
      "#d9eff1"
    ],
    "speed": 0.32,
    "zoom": 1,
    "meshDetail": 24,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/trace/

# Trace

Fine spirals glide through soft figure-eight paths, leaving a delicate fading wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / fine spiral**.

[Open Trace in the live editor](/trace) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Iridescent trace**: `#0c101a`, `#8b82e1`, `#7de1ca`
- **Rose trace**: `#191012`, `#d491a0`, `#f3d4b5`
- **Silver trace**: `#10161a`, `#7697a7`, `#dce9ec`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `2200`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.2`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.3`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.35`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.4`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/trace) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "trace",
    "colors": [
      "#0c101a",
      "#8b82e1",
      "#7de1ca"
    ],
    "speed": 0.3,
    "particleCount": 2200,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/velour/

# Velour

Broad luminous folds drift through a softly grained dark field. A growing glow swells outward and fades in a repeating pulse; your cursor gently parts and bends the nearby veils.

Category: **Atmosphere / diffused light veils**.

[Open Velour in the live editor](/velour) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Deep teal**: `#040c0c`, `#165f56`, `#4e9987`
- **Smoky violet**: `#090710`, `#4d3a72`, `#9b80be`
- **Warm copper**: `#100a08`, `#805444`, `#c68c69`

## Shader and camera controls

- **Drift speed** (`speed`): 0 to 2. Default: `0.3`.
- **Pulse glow** (`pulseStrength`): 0 to 2. Default: `1`.
- **Pulse pace** (`pulseRate`): 0.25 to 3. Default: `1.4`.
- **Field scale** (`scale`): 0.3 to 3. Default: `1`.
- **Loop depth** (`amplitude`): 0 to 2. Default: `0.9`.
- **Material thickness** (`softness`): 0 to 1. Default: `0.85`.
- **Fold detail** (`turbulence`): 0 to 2. Default: `0.55`.
- **Extra blur** (`blur`): 0 to 24. Default: `0`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Cursor diffusion** (`interaction`): 0 to 2. Default: `0.9`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.035`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.12`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `18`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/velour) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "velour",
    "colors": [
      "#040c0c",
      "#165f56",
      "#4e9987"
    ],
    "speed": 0.3,
    "pulseStrength": 1,
    "pulseRate": 1.4,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/vitreous/

# Vitreous

A softly rippled glass surface refracts silver light around a deep central shadow. A physical spring carries the cursor through its surface, matching the Layers hero composition.

Category: **Prism / refracted glass**.

[Open Vitreous in the live editor](/vitreous) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Layers silver**: `#000000`, `#9e9e9e`, `#d6d6d6`
- **Warm silver**: `#080604`, `#a79b8b`, `#e8d9c3`
- **Glacial glass**: `#03080e`, `#899cae`, `#d4e8f3`

## Shader and camera controls

- **Photo strength** (`photoStrength`): 0 to 1. Default: `1`.
- **Photo distortion** (`photoDistortion`): 0 to 2. Default: `1`.
- **Speed** (`speed`): 0 to 2. Default: `0.14`.
- **Scale** (`scale`): 0.3 to 3. Default: `1.02`.
- **Relief** (`amplitude`): 0 to 2. Default: `1`.
- **Ripples** (`turbulence`): 0 to 2. Default: `0.5`.
- **Refraction** (`softness`): 0 to 1. Default: `0.5`.
- **Blur** (`blur`): 0 to 24. Default: `0`.
- **Cursor pressure** (`interaction`): 0 to 2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.15`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `12`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/vitreous) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "vitreous",
    "colors": [
      "#000000",
      "#9e9e9e",
      "#d6d6d6"
    ],
    "photoStrength": 1,
    "photoDistortion": 1,
    "speed": 0.14,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/vortex/

# Vortex

Orbiting particle trails swirl around moving centers with broad, fading curls. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / orbital swirl**.

[Open Vortex in the live editor](/vortex) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Violet vortex**: `#0e0821`, `#8d57c9`, `#c7ebff`
- **Copper vortex**: `#1b0d09`, `#b67447`, `#fff2c7`
- **Emerald vortex**: `#071b18`, `#419d85`, `#bcf9e9`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `4600`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.8`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.55`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.06`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.45`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/vortex) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "vortex",
    "colors": [
      "#0e0821",
      "#8d57c9",
      "#c7ebff"
    ],
    "speed": 0.3,
    "particleCount": 4600,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/warp-tunnel/

# Warp Tunnel

Projected stars stream through depth toward the camera. Cursor steering bends their flight while depth-aligned streaks catch the light.

Category: **Space / forward flight**.

[Open Warp Tunnel in the live editor](/warp-tunnel) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Polar flight**: `#050c1d`, `#4a82b8`, `#e0f3ff`
- **Amber flight**: `#180e0b`, `#b17a43`, `#ffe5b2`
- **Violet flight**: `#10091f`, `#7b58b4`, `#e4d0ff`

## Shader and camera controls

- **Flight speed** (`speed`): 0 to 2. Default: `0.6`.
- **Stars** (`particleCount`): 800 to 10000. Default: `4800`.
- **Star size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Drift** (`turbulence`): 0 to 2. Default: `0.4`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.35`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.9`.
- **Particle fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.008`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.4`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Flow direction** (`flowAngle`): -180 to 180. Default: `0`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/warp-tunnel) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "warp",
    "colors": [
      "#050c1d",
      "#4a82b8",
      "#e0f3ff"
    ],
    "speed": 0.6,
    "particleCount": 4800,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/wisp/

# Wisp

Weightless spirals float slowly across the canvas on gentle wandering paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.

Category: **Trails / weightless spirals**.

[Open Wisp in the live editor](/wisp) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Moon wisp**: `#091326`, `#5f91b0`, `#d6eef9`
- **Rose wisp**: `#1f1020`, `#b06f9d`, `#f5d9ef`
- **Mist wisp**: `#0c201d`, `#689f8e`, `#e7f3d2`

## Shader and camera controls

- **Travel speed** (`speed`): 0 to 2. Default: `0.3`.
- **Particles** (`particleCount`): 800 to 10000. Default: `1600`.
- **Dot size** (`dotSize`): 0.5 to 8. Default: `0.9`.
- **Trail dispersion** (`amplitude`): 0 to 2. Default: `1`.
- **Trail length** (`trailLength`): 0.3 to 2. Default: `1.15`.
- **Trail fade** (`trailFalloff`): 0.25 to 4. Default: `0.8`.
- **Path wander** (`turbulence`): 0 to 2. Default: `0.25`.
- **Cursor strength** (`interaction`): 0 to 2. Default: `0.25`.
- **Soft focus** (`softness`): 0 to 1. Default: `0.4`.
- **Zoom** (`zoom`): 0.3 to 3. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0.06`.
- **Fade in · ms** (`fadeIn`): 0 to 10000. Default: `0`.
- **Fade delay · ms** (`fadeDelay`): 0 to 5000. Default: `0`.
- **Image opacity** (`overlayOpacity`): 0 to 1. Default: `0.5`.
- **Glow** (`glow`): 0 to 1.5. Default: `0.45`.
- **Cursor radius** (`gridRadius`): 40 to 320. Default: `150`.
- **Force: attract / repel / disperse** (`force`): -1 to 1. Default: `0`.
- **Recovery** (`recovery`): 0.25 to 3. Default: `1`.
- **Click wave** (`pulseStrength`): 0 to 2. Default: `1`.
- **Depth** (`depth`): 0 to 2. Default: `1.15`.
- **Size variation** (`sizeVariation`): 0 to 1. Default: `0.7`.
- **Opacity** (`opacity`): 0.1 to 1. Default: `0.8`.
- **Light** (`intensity`): 0.2 to 1.5. Default: `1`.
- **Twinkle** (`twinkle`): 0 to 1. Default: `0.3`.
- **Spread** (`spread`): 0.3 to 2. Default: `1`.
- **Text breathing room** (`quietRadius`): 0 to 0.5. Default: `0`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/wisp) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "wisp",
    "colors": [
      "#091326",
      "#5f91b0",
      "#d6eef9"
    ],
    "speed": 0.3,
    "particleCount": 1600,
    "dotSize": 0.9,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).


---

Canonical: https://striktly.com/docs/shaders/worm-hole/

# Worm Hole

An immersive journey inside a glowing wormhole. Smooth walls twist around a luminous core as rolling waves spiral outward and sweep past the camera. Move your pointer to shift your view through the passage.

Category: **Space / luminous wormhole**.

[Open Worm Hole in the live editor](/shaders/worm-hole) to customize its palette, motion, and supported camera controls. Use **Take the code** to download the configured kit after signing in. Complete membership access is free during the current launch offer.

## Presets

- **Warm milk**: `#b8bec8`, `#f0efed`, `#fff0d8`
- **Pearl**: `#aebac8`, `#e9eff5`, `#e8f5ff`
- **Porcelain**: `#c5bcbc`, `#f1e8e1`, `#ffe1b0`

## Shader and camera controls

- **Circular shape** (`roundness`): 0 to 1. Default: `1`.
- **Swirl twist** (`twist`): 0 to 2. Default: `1`.
- **Circular flow speed** (`speed`): 0 to 1.2. Default: `0.38`.
- **Liquid thickness** (`amplitude`): 0.3 to 1.8. Default: `1.05`.
- **Liquid curl** (`turbulence`): 0 to 1.8. Default: `0.8`.
- **Passing wave depth** (`spread`): 0 to 1.6. Default: `1`.
- **Wave spacing** (`lineWidth`): 0.5 to 1.6. Default: `1`.
- **Framing** (`scale`): 0.6 to 1.6. Default: `1`.
- **Highlight softness** (`softness`): 0 to 1. Default: `0.65`.
- **Inner glow** (`edgeGlow`): 0 to 1.8. Default: `1`.
- **Studio light** (`contrast`): 0.3 to 1.8. Default: `1`.
- **Pointer influence** (`interaction`): 0 to 1.5. Default: `0.5`.
- **Exposure** (`intensity`): 0.6 to 1.2. Default: `1`.
- **Grain** (`noise`): 0 to 0.3. Default: `0`.
- **Glow** (`glow`): 0 to 1.5. Default: `0`.
- **Glow radius** (`glowRadius`): 2 to 40. Default: `14`.
- **Fade in (fixed)** (`fadeIn`): fixed at 0. Default: `0`.
- **Fade delay (fixed)** (`fadeDelay`): fixed at 0. Default: `0`.
- **Image opacity (fixed)** (`overlayOpacity`): fixed at 0.5. Default: `0.5`.
- **Camera rotation** (`cameraRotation`): -180 to 180. Default: `0`.
- **Camera zoom** (`cameraZoom`): 0.3 to 4. Default: `1`.
- **Horizontal focus** (`cameraX`): -2 to 2. Default: `0`.
- **Vertical focus** (`cameraY`): -2 to 2. Default: `0`.

These ranges describe the published catalog version `c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21`. The website editor can curate or lock particular controls. [The live editor](/shaders/worm-hole) and the current MCP settings schema are authoritative for available actions. Existing saved configurations remain supported.

## Integration example

Download this shader's kit before running the example. The runtime is a local file from that kit, not a public CDN or npm package.

```javascript
import { createBackground } from './shader-background.js';

const background = createBackground(
  document.querySelector('#background'),
  {
    "effect": "milk-light",
    "colors": [
      "#b8bec8",
      "#f0efed",
      "#fff0d8"
    ],
    "roundness": 1,
    "twist": 1,
    "speed": 0.38,
    "maxPixels": 700000,
    "maxFPS": 30
  }
);

// On view teardown:
// background.destroy();
```

Give the host an explicit size, preserve applicable stage CSS from the exported example, and keep content above the decorative canvas. [JavaScript](/docs/javascript), [React](/docs/react), and [Next.js](/docs/nextjs) guides explain integration.

## Motion, assets, and licensing

Test the finished page on your target devices, respect reduced motion, and use a pause control for persistent animation. Keep the license and notices included in your kit. Uploaded imagery needs its own usage rights. See [performance](/docs/performance) and [licensing](/docs/licensing).

[Browse all shader references](/docs/shaders).