Shaderfield

Components

Live shaders and motion effects from the Shaders Lab films. Hover a preview to play with it, open one to tune it and copy the code, the AI prompt or a video render.

{{ resultLabel }}

{{ c.name }}

{{ c.kind }}

{{ c.desc }}

Decode

Type Entrances

DOM

Five letter-by-letter entrances: soft, decode, flip, scatter and glitch.

{{ mtCurtainWord }}

Pixel Curtain

DOM

A scene change through scattered cells that cover, swap and clear.

Words light up as the *story* moves through the page.

Word Reveal

DOM

Scroll-linked paragraph reveal, word by word, with accent words.

Hover here

Open

Spring Cursor

DOM

A cursor label on a damped spring that leans with its speed.

{{ d.name }}

{{ d.cat }}

{{ d.desc }}

Components / Shaders / {{ labName }}

{{ labName }}

{{ labDesc }}

{{ tabNote }}

{{ recordLabel }} Record 6 s · 4K Save PNG frame

{{ code }}

Props

Components / Motion / Type Entrances

Type Entrances

Letter-by-letter entrances from the Nodepath Launch film. Each mode has its own stagger, easing, blur and chromatic split.

Replay

{{ typeCode }}

Components / Motion / Pixel Curtain

Pixel Curtain

The scene transition from Closebook Launch. Cells cover the frame in a seeded scatter, the content swaps underneath, then they clear in a new order. Click the stage.

{{ curtainLabel }} {{ curtainWord }}

Cells {{ curtainCols }} Run transition

{{ curtainCode }}

Components / Motion / Word Reveal

Word Reveal

From Tended HR and Closebook Launch. On a page it follows scroll position; here you can drag the progress to preview it.

Each shader began as a frame in a launch film. Now it runs *live* in the browser, follows the *cursor* and renders straight to *video*.

{{ revealCode }}

Components / Motion / Spring Cursor

Spring Cursor

The gallery cursor from Cursor Gallery. A label chases the pointer on a damped spring, leaning and stretching with its speed.

Move your cursor here

Stiffness {{ springK }} Damping {{ springD }}

{{ springCode }}

Components / {{ demoCat }} / {{ demoName }}

{{ demoName }}

{{ demoDesc }}

Replay

{{ demoCode }}

Get started / Installation

Installation

Shaderfield is one file with no dependencies. Download it, add it to your project, then use it in any of three ways.

1. Website

Load the script and place the element. It fills its positioned parent, pauses off-screen and holds a still frame for reduced motion. Any parameter from a component's props table is an attribute.

{{ useWebCode }}

2. Motion video

Record a plate from any shader's Video tab, or render frame by frame inside Remotion or any frame loop. The same time value always gives the same frame.

const field = Shaderfield.mount(el, {
  effect: "skein", palette: "aurora", autoplay: false
});
field.render(frame / fps);

3. With AI

Open a shader, tune it, then copy from the AI prompt tab. Paste it into your coding agent with shaderfield.js in the project. The prompt carries the effect, palette, every value and the placement rules, for a website or a video plate.

API