# Paper experiments

Researched and built on 7 September 2026.

[Try the local demos](http://localhost:4173/studio/paper) · [Open the editable Paper file](https://app.paper.design/file/01M1Z3R8SFF986YGYCHQ1CFMBX/1-0)

## What looks useful for Action

I would start with controlled image variations and logo motion. The glass-to-chrome experiment retains the sculpture's composition well, and Liquid Metal makes the existing Action mark respond to moving light. Both give us concrete artwork to judge without redesigning the homepage.

Paper also looks useful for working on an actual website section. Snapshot captures editable layers, and MCP can read and write layouts and styles. A capture still needs review before its exported code replaces a maintained component. Paper's Learn catalog includes examples of both directions of that workflow. [Paper Learn](https://app.paper.design/learn)

## The demos

| Study | What it demonstrates | Verified here |
| --- | --- | --- |
| Image generation | Grok generates a glass sculpture; an edit uses that image as a reference and changes the material to chrome. | Two completed generations, editable comparison board, local comparison slider. |
| Warp field | Flowing amber bands using Paper Warp, inspired by the technique in the Cloudflare loader tutorial. | Native shader, settings export, local component. Our variation is not an exact Cloudflare recreation. |
| Liquid Metal | Reflections conform to the existing Action SVG. | Native shader with the actual logo, settings export, local component. |
| Halftone | The generated sculpture becomes a cobalt dot pattern. | Native filter, settings export, local dot-size control. |
| Heatmap | Warm light moves through and around the Action mark. | Additional local implementation using the documented shader. No separate Paper board. |
| Gem Smoke | Smoke follows the transparent logo mask. | Additional local implementation using the documented shader. No separate Paper board. |

The browser viewer runs one study at a time. Motion follows the reduced-motion preference until Play is pressed and pauses when the tab is hidden. Changes in the viewer are temporary and do not sync back to Paper. There are now ten local studies and eight editable Paper boards.

## Round two: experimental objects

The gallery opens on four more exploratory pieces. The original six remain under Round 1.

| Study | What to try | What lives in Paper |
| --- | --- | --- |
| Soft machine | Move a circular lens over a red silicone knot to reveal its chrome skeleton. Change lens size or reveal the whole interior. | Two completed Grok generations and an editable comparison layout. |
| Artificial eclipse | Move a black disk across the rays and change its diameter. | Native God Rays, a grayscale filter, an editable disk, and typography. |
| Signal loom | Bend 112 blue and silver threads with the pointer, or increase their tension. | A vector snapshot with 112 editable paths and editable typography. |
| Living matter | Scatter the Action mark into 2,340 particles, move through them, then assemble it. | An exact vector snapshot with individually editable circles, sampled from the existing Action SVG. |

The eclipse composes a shader with simple geometry. God Rays exposes ray density, intensity, center glow, speed, and position. [God Rays reference](https://shaders.paper.design/god-rays)

Signal loom and Living matter use original Canvas 2D animation code. Their Paper layers are still vector snapshots. The geometry is shared with the live renderer and a repeatable export script. Soft machine uses a second pair of Grok generations, again one new image and one reference edit. The interior is an imagined mechanical construction.

Round two validation includes Paper screenshots and exported PNG inspection, project checks/build, and real canvas rendering through the same drawing function as the viewer. Rendered-pixel comparisons verify time, control, and pointer changes; repeated fixed-time frames are identical. Browser interaction testing was not performed. The two custom animations also have six-second MP4 previews rendered locally. These are separate from Paper's paid video-export feature.

## More directions worth trying

These are documented in Learn or the shader reference. I have not tested these workflows in this session.

| Direction | A useful experiment | Source |
| --- | --- | --- |
| Editable vectors | Generate an illustration with Quiver, then refine its paths. | [Generate and refine SVGs](https://youtu.be/pN5FrsYqHRE) |
| Animated borders | Give an active button a restrained moving edge. | [Remix Resend's button](https://youtu.be/rWCCgWMR4EY) |
| Live page capture | Capture one existing section for a focused visual edit. | [Paper Snapshot](https://youtu.be/v0tFOMYY_7E) |
| Tokens from code | Bring the site's real color and typography variables into the canvas. | [CSS variables to Paper tokens](https://youtu.be/TICdyLQpx40) |
| Real content | Lay out material from Notion instead of placeholder copy. | [Design with real content](https://youtu.be/w-dJPT_0qd8) |
| Email design | Adapt a captured layout into a Resend template. | [Design to Resend](https://youtu.be/qmtIZqvEjsA) |
| Responsive layout | Test how a section reflows as its content and width change. | [Flex layout](https://youtu.be/Pkg7gcF2k6g) |
| Code round trip | Adjust a component in Paper and bring the edits back into the repo. | [Sync with your codebase](https://youtu.be/ysmiOrPbnZM) |

These links were collected from the live Learn catalog. I read the descriptions and shader references and tested the selected techniques; I did not watch every tutorial end to end.

## What the effects actually do

Warp starts with checks, stripes, or an edge, then distorts the color field. Its softness, swirl, scale, and motion controls cover a wide range of fluid effects. The Cloudflare lesson uses Warp. Our amber study starts from Nectar and changes the pattern and timing. [Warp reference](https://shaders.paper.design/warp), [Cloudflare tutorial](https://youtu.be/fOn76uUpYEY)

Liquid Metal uses a transparent image as its mask and exposes reflection density, edge contour, distortion, and color dispersion. Heatmap adds a moving intensity field and glow. Gem Smoke creates distortion inside and outside a transparent shape. These are live shaders; a logo SVG remains the source geometry. [Liquid Metal](https://shaders.paper.design/liquid-metal), [Heatmap](https://shaders.paper.design/heatmap), [Gem Smoke](https://shaders.paper.design/gem-smoke)

Paper's library also includes fluted glass, water, dithering, lens distortion, CMYK halftone, and paper texture. Those offer a way to make a coherent family from otherwise unrelated images. [Shader gallery](https://shaders.paper.design/)

## Tool boundaries we confirmed

- MCP creates and reads files, artboards, HTML/CSS layers, image fills, and code exports. It also exposes tokens and comments.
- The image-generation guide exposes `paper-gen://` URLs. We used `grok-imagine-quality` and `grok-imagine-quality-edit`, with the first node passed as the edit reference. The documented usage was 1 plus 2 units.
- The exposed MCP tools have no dedicated shader-creation or shader-parameter tool. I used Paper's native picker and controls for those steps, then MCP to place the layers and read the actual exported settings.
- PNG and JSX export worked. MP4 export returned a paid-plan requirement, so no Paper video clips were produced. The local viewer runs the shader code instead.
- The code export identifies `@paper-design/shaders-react@0.0.80`, matching the version already installed in this project. No dependency change was needed.

Paper Shaders supports React and vanilla JavaScript. The current official repository specifies Apache 2.0 and recommends pinning its version. Older indexed documentation still mentions a different license, so use the repository and installed package for current terms. [Official repository](https://github.com/paper-design/shaders/blob/main/README.md)

## Retained artifacts

- `exports/` contains the exact JSX snippets from four native shaders.
- `provenance.json` records the generated images, source paths, and content hashes.
- `round-two-generation.json` retains the exact new image prompts, references, and Paper asset IDs.
- `../../public/studies/paper/` contains generated images, eight board exports, vector artwork, logo samples, and two custom motion clips.
- `../../scripts/check-paper-assets.mjs` checks asset hashes and the installed shader version.
- `../../scripts/export-paper-optics.mjs` rebuilds the two vector artworks from shared geometry and samples the logo source.
- `../../scripts/check-paper-optics.mjs` verifies actual rendered frame differences. Add `--video` to regenerate the MP4 previews. Both optics scripts use `node --experimental-strip-types` and need `@napi-rs/canvas`, supplied by the bundled runtime through `NODE_PATH`; video rendering also needs FFmpeg.

The homepage preset, saved experiments, and public deployment remain unchanged. These studies are candidates for review, not accepted brand direction.