MISREGISTERED

見当ズレ、網点、オーバープリント、モアレ、トンボ。印刷の不具合そのものを動きの素材にしたら、ブラウザの中で「刷られている」と感じる映像になるか。どのコマで止めてもポスターとして成立させられるか。

Claude Code（Opus 5.5）にプロンプトを1回送り、作品が完成するまで追加の指示はしていません。コンセプトから実装までClaudeが決め、ヘッドレスChromiumで指定時刻のコマ一覧・1/15秒刻みのフィルムストリップ・等倍の拡大を撮影して、確認と修正を繰り返しています。ギャラリーへの追加は、作品の納品後に別の依頼として行いました。

HTML 1ファイルで動作し、画像・動画・ライブラリ・Webフォントは使っていません。書体は端末にあるもの（Helvetica Neue、なければHelvetica → Arialなど）を起動時に読み込み、描画はWebGL2のシェーダで毎フレーム計算しています。

Claudeが行った修正

• 黒1色のFORMがグレーに見えた問題に対し、インクの濃さを覆う面積ではなく膜の厚さ（Beer–Lambert）として掛けるよう変更。
• 何も刷っていない紙に薄い点が並ぶ、網点のアンチエイリアスのにじみを修正。
• インクのムラが四角いブロック状に見えたため、ぼかしたノイズのチャンネルを作ってなめらかに。
• FORMに裁断前から細い継ぎ目が見えたため、裁断の瞬間までは1枚のまま描くよう変更。
• 網点の影が黒の中に透けて黒が濁ったため、影を黒の下で抜き、細いトラップだけを残した。
• クライマックスで巨大な黒い文字が塊になって読めなかったため、各行が版ごとに遅れて滑り込む動きに作り直し。
• PERFECT IS BORING. から MIS / REGIS / TERED への組み替えを、「誤差が広がる」と「植字機が組む」の2段階に分けた。
• 拡大したトンボの縁が手描きのように波打ったため、縁の荒れに画面上の上限をかけた。

時間と使用量は、作品を作ったClaude Codeセッションの情報から取得した値です。使用量はセッション単位の累計しか取れなかったため、作品の制作に加えて、ギャラリー追加の作業が始まった時点（2026-09-25 14:43Z）までを含みます。生のログはこのリポジトリには含まれていません。

モデルID

claude-opus-5-5（セッション設定・最後に応答したモデル）

Effort

xhigh（セッション設定）

Human edits

0

生成時間

54m26s

モデル呼び出し回数

記録なし

Input tokens

25,179,768

Cached input / cache read

24,747,011

キャッシュ書込

429,860

通常入力（キャッシュ書込を除く）

2,897

Output tokens

249,675

Total processed tokens

25,429,443

コスト（セッション表示）

$13.38（参考値）

HTMLの実測行数

1,005行

HTMLの実測サイズ

54,182 bytes

入力は呼び出しごとに再送された履歴を含む累計で、Cached inputとキャッシュ書込はInputの内数です。Output tokensはthinkingを含みます。Total = Input + Output。

時間・コストの注記

13:47:06Z（セッション開始）→ 14:41:32Z（作品のコミット）で54分26秒。開始時刻は最初のプロンプトではなくセッションの作成時刻です。コンテキスト上限による自動要約は入っていません。コストはセッションが表示した値で、単価の前提は確認していないため参考値です。

フレーム時間

動作確認はGPUのないLinux上のヘッドレスChromium（ソフトウェア描画）で行ったため、実機のフレーム時間は未計測です。フレームが落ち続けると、作品は内部解像度を段階的に下げます（半分まで）。

出典は作品のREADMEです。行数とバイト数は収録HTMLを実測しています。

要点

印刷の不具合を振り付けにすること、紙・黒・蛍光の赤橙・コバルトの限られた色、巨大なグロテスク体、どのコマで止めてもポスターになる構図、15〜20秒のシームレスなループを指定。MIS / REGIS / TERED で始まり、FORM が叩きつけられて壊れ、一瞬だけ完全に見当が合って PERFECT IS BORING. が現れ、小さな誤差から冒頭に戻るという流れも示しています。

Create a single self-contained index.html that is a breathtaking, seamless looping motion-graphics artwork running entirely in the browser.

This is not a website, not a landing page, not a UI, and not an interactive experience.

It is a piece of graphic design in motion.

CONCEPT — “MISREGISTERED”

Create an experimental motion piece inspired by the physical imperfections of print:

* risograph
* screen printing
* offset printing
* misregistration
* halftone screens
* overprinting
* ink trapping
* moiré
* registration marks
* crop marks
* editorial typography
* Swiss / International Typographic Style
* optical art
* experimental poster design
* kinetic typography

The central idea:

Printing errors become the choreography.

Everything should feel as though an impossibly sophisticated printing press has come alive and is continuously designing, printing, misaligning, destroying, and rebuilding the same poster.

It should feel tactile, graphic, physical, editorial, and extremely art-directed.

Avoid the generic “creative coding” aesthetic.

I want something that looks like it came from an elite motion-design studio.

⸻

VISUAL LANGUAGE

Use an intentionally limited print-inspired palette.

Think:

warm paper / off-white
deep ink black
fluorescent red-orange
rich cobalt / ultramarine blue

Additional colors may appear naturally where simulated inks overlap.

Do NOT use:

* neon-on-black cyberpunk aesthetics
* glowing particles
* generic gradients
* glassmorphism
* futuristic HUDs
* starfields
* random floating geometry
* generic generative-art blobs
* obvious “AI art” aesthetics

The frame should repeatedly become something that could work as a beautiful static poster if paused at almost any moment.

Composition matters enormously.

Use extreme scale.

Typography may extend beyond the viewport.

Let individual letters become architecture.

Use negative space aggressively.

Alternate between dense compositions and almost-empty frames.

⸻

TYPOGRAPHY

Typography is one of the main visual materials.

Use enormous, uncompromising grotesk typography.

Possible phrases include:

MISREGISTERED

FORM

OFFSET

PRINT

ERROR

001

CMYK

ALIGN

MISALIGN

PERFECT
IS
BORING.

Do not simply animate lines of text like presentation slides.

Letters should become graphical objects.

Crop them.

Stretch them.

Mask them.

Split them into printing plates.

Turn them into halftones.

Let them disappear into fields of dots.

Let individual glyphs become larger than the screen.

Use typography as mass, rhythm, texture, and geometry.

⸻

PRINT IMPERFECTIONS

Make the digital image feel physically printed.

Simulate details such as:

* independent ink plates
* subtle plate misalignment
* chromatic registration offsets
* imperfect ink coverage
* halftone dot structures
* changing halftone angles
* dot gain
* overprint behavior
* ink density variation
* paper grain
* rough printed edges
* registration targets
* crop marks
* printer annotations
* tiny technical numbers
* accidental-looking offsets
* moiré interference patterns

These should not merely be decorative overlays.

They should actively participate in the motion.

For example:

a letter separates into printing plates →

the plates drift out of registration →

their surfaces dissolve into halftone dots →

the dots enlarge until they become abstract circles →

the circles compress into lines →

the lines become a new typographic composition.

Everything should transform into something else.

Avoid arbitrary cuts whenever a visual transformation could connect two scenes.

⸻

MOTION

Create approximately a 15–20 second master loop.

The loop must be truly seamless.

The viewer should not be able to immediately identify where it restarts.

Think like a motion designer, not a frontend developer.

Build rhythm.

Use:

stillness
→ anticipation
→ violent graphic movement
→ impact
→ silence
→ transformation
→ acceleration
→ resolution.

Do not keep everything moving continuously.

Some of the strongest moments should almost stop.

Then suddenly break.

Movement should sometimes feel mechanical, like a printing press:

SNAP
SLIDE
REGISTER
STAMP
ROLL
CUT

Other moments should feel fluid and impossible.

Use strong easing and deliberate timing.

Avoid default CSS-animation feeling.

Avoid objects casually floating around.

Every movement should have visual intention.

⸻

SEQUENCE

Do not treat this as a rigid storyboard, but use this as a compositional direction.

Begin with an extremely strong poster-like frame dominated by:

MIS
REGIS
TERED

Hold it just long enough to register.

Then something becomes subtly wrong.

One printing plate shifts.

Then another.

Registration breaks apart.

The typography separates into multiple ink layers.

The composition violently expands.

Letters become halftone structures.

Halftones become enormous abstract fields.

Moiré patterns emerge from overlapping screens.

The camera/composition appears to travel through the printed structure.

Registration marks and printer metadata briefly become dominant graphical elements.

A massive typographic composition slams into place.

FORM

Then destroys itself.

A quieter composition appears.

Small technical typography.

Large negative space.

Then another burst.

At some point, create one unforgettable visual climax where several systems converge:

typography

* halftone
* misregistration
* geometric composition
* overprinting

For a brief moment, everything snaps into perfect registration.

Reveal:

PERFECT
IS
BORING.

Hold.

Then introduce one tiny registration error.

The error propagates through the entire composition.

The artwork reconstructs the opening frame.

The loop begins again without a visible cut.

⸻

GRAPHICAL DETAIL

I want obsessive detail.

Add tiny elements that reward looking closely:

printer calibration numbers
plate labels
coordinates
crop marks
registration crosses
micro typography
frame counters
ink percentages
random-looking production codes
measurement ticks

But maintain hierarchy.

This must never become visual clutter.

The large composition should read instantly from across the room.

The small details should reveal themselves only afterward.

⸻

TECHNICAL CONSTRAINTS

Deliver exactly one index.html.

It must run by simply opening it in a modern browser.

No images.

No videos.

No external visual assets.

No pre-rendered animation.

Generate the entire visual experience procedurally with browser technologies.

Canvas, WebGL2, shaders, CSS, SVG, or combinations of them are allowed.

Choose whatever rendering architecture produces the strongest result.

Prioritize:

* smooth 60fps motion
* crisp rendering on Retina displays
* responsive fullscreen composition
* correct resizing
* stable long-running animation
* deterministic looping
* high visual density without unnecessary performance waste

The piece should work especially well at 16:9 desktop dimensions.

No controls.

No buttons.

No cursor interactions.

No explanatory UI.

No loading screen unless technically unavoidable.

The artwork begins automatically.

⸻

QUALITY BAR

Do not make a demo.

Do not make a proof of concept.

Do not make a collection of effects.

Create a finished motion-design piece.

Every frame should feel art-directed.

Every transition should feel intentional.

There should be a clear visual system tying the entire animation together.

Be ruthless about removing anything that feels generic.

If an effect looks like something commonly seen in creative-coding demos, push it further until it feels designed rather than generated.

The final result should feel like:

a Swiss poster
fed into a broken industrial printing press
directed by an experimental motion-design studio
and somehow rendered live by the browser.

Make it strange.

Make it graphic.

Make it tactile.

Make it precise and imperfect at the same time.

Make something I would want to watch loop for five minutes.

Go all out.

しくみ

起動時に端末の書体をCanvas 2Dで描き、距離場（SDF）の文字アトラスを作ります。レイアウトは実際に測った字幅とカーニングから組むので、書体が変わっても構図が崩れません。

文字・罫・円・トンボはすべてGPUのインスタンス描画で、黒・赤・青の各版に書き込みます。書き込み先は「網点にかかるトーン」と「網点にかからない線画」の2枚で、抜き（ノックアウト）もここで処理します。

印刷パスでは、版ごとに見当（位置・回転）、スクリーン角度、線数、網点の形を持たせて刷ります。途中からはセルが覆うインク量で丸の大きさが決まるAM網点に切り替わり、文字が大きな丸の集まりに分解されます。インクは膜の厚さで光を吸う半透明の層として掛け合わせるので、赤と青の重なりは自然に暗い紫になります。濃度ムラ、かすれ、ドットゲイン、縁の荒れ、紙の繊維もコードで作っています。

動きはすべて時刻tの関数です。18.9秒以降と0秒は同じ関数で描く同じ絵で、継ぎ目は静止の真ん中にあります。余白のFRAMEとIMPRESSION（刷り枚数）はループで戻らず増え続けるので、数字からも継ぎ目は分かりません。

Zenn記事：なし

MP4はリポジトリに含めず、書き出しツールから作れます。1200コマを4Kで刷って1080pに縮め、Vermilion Wellと同じmacOS標準のAVFoundationでエンコードします。

X投稿：なし