---
name: specimens
version: 1.0.0
description: Find, fetch and adapt live web interaction effects from Specimens. Every specimen is one self-contained HTML file in plain HTML, CSS and JavaScript, free to use under the Unlicense or MIT-0 with no credit needed.
---

# Specimens: instructions for AI agents

Specimens is a catalogue of web interaction effects: parallax and 3D, physics, generative maths, type and drawing,
and interface details. People browse it at https://specimens.llmvuln.xyz/. This file is for you, an agent working for someone who wants one
of these effects in their own project.

## Licence

Unlicense OR MIT-0. Copy, change and ship any specimen, commercially or not. **No credit or attribution is needed**, and you
don't need to ask. Keep or drop the licence comment at the top of a file as you like.

## Find a specimen

1. Fetch `https://specimens.llmvuln.xyz/specimens.json`. Every entry has `id`, `name`, `technique` (a short label such as "Verlet
   integration"), `family`, `inputs.pointer` and `inputs.touch` (how a person interacts with it), `description`,
   `try`, `details` (technique, parameters, support notes) and `source_url`.
2. Match on what the person asked for: the effect's look (`description`), how it works (`technique`, `details`), or
   how it is used (`inputs`). `https://specimens.llmvuln.xyz/llms.txt` has the same catalogue as a Markdown list, grouped by family.
3. If several fit, show the person two or three by `name` with their `page_url`, where each one runs live, and let
   them choose.

## Fetch it

`source_url` (`https://specimens.llmvuln.xyz/s/<id>`) is the complete file: one HTML page with its CSS in a `<style>` and its code in
one `<script>`. It needs no build step and no packages; some files load a Google Font. Open it in a browser and it
runs on its own. These files are static and served with CORS open (`Access-Control-Allow-Origin: *`), so fetch them
directly.

## Adapt it

Every file follows the same conventions, so these steps carry over:

- **Colours** are CSS custom properties on `:root` using `light-dark()` (`--bg`, `--ink`, `--muted`, `--accent` and
  similar). Map them to the project's own tokens instead of hard-coding new colours.
- **Page-level CSS**: most files style `html, body` and fill the window. When embedding in an existing page, put the
  specimen in a container and scope those rules to it, or run it in an `<iframe>` to keep it isolated (the simplest
  route, and how the Specimens page itself shows them).
- **Canvas specimens** size to the window and scale by `devicePixelRatio`; when moving one into a container, size
  from the container and redo the sizing on its `ResizeObserver` rather than the window's `resize`.
- **Demo behaviour**: many specimens run an idle "autopilot" so they look alive in a catalogue (a ghost pointer, a
  self-drawing stroke). Keep or remove it to suit the project; it is clearly marked in comments near the frame loop.
- **Readouts** (small monospace captions showing numbers) are for the catalogue; remove them if they don't belong.
- **Accessibility** is already handled where it applies: `prefers-reduced-motion` slows or stills motion, controls are
  real buttons, inputs and sliders with labels, and canvases carry `role="img"` with a description. Keep these.
- **Interaction** uses Pointer Events, so mouse, pen and touch all work; canvases that take drags set
  `touch-action: none`.

When you hand the result back, say which specimen it came from (by name) so the person can compare with the original.

## Browsing the page instead

If you are driving a browser on https://specimens.llmvuln.xyz/: each specimen is an `<article class="specimen" id="<id>">` with
`data-file="s/<id>.html"`. Its `.about` block holds the description, the try line and a details list. `#filter`
filters the page by name, technique or input. The **[ view code ]** button opens the full source in a dialog and
**[ copy ]** copies it.