Blueprint Technical Drawing

About this style

Blueprints take their name and color from the cyanotype process, a 19th-century photographic print in which exposed paper turns Prussian blue and the drawn lines stay white; for decades it was the cheap way to copy engineering and architectural drawings. The look carries drafting conventions with it: a hierarchy of line types, dimension lines with arrowheads, numbered callouts and a title block. Designers still borrow it to signal engineering credibility and to show exactly how something works.

<inputs>
You're making a blueprint-style technical animation. I may supply any of these; if I don't give you something, use the default and don't ask.
- Mechanism: planetary gear reducer, module 3; sun 24 teeth, three 18-tooth planets, ring 60; ring fixed, sun in, carrier out at 3.5 : 1.
- Maker and part: Halvard Instruments, PGR-40 (fictional).
- Callouts: housing, ring gear, planet gear, sun gear, carrier.
- Length: 10 seconds.
</inputs>

<direction>
Cyanotype sheet: paper #103F7F darkening to #0A2D5E at the corners, linework #F1F5FF. Grid: minor lines every 24px at 7% white, major every 120px at 14%. Mottle the paper with low-frequency blotches (±4% brightness) and fine grain.
Line hierarchy, never one weight: visible outlines 2.5px; hidden edges 1.5px dashed 9/5; centerlines 1px long-dash-dot; dimension and extension lines 1px, extension lines with a 4px gap at the part and 8px overrun; solid arrowheads 14px long at 3:1. Section cuts get 45° hatching at 8px pitch. Lay a 0.5px blur under each crisp stroke so it reads printed, not glowing.
Draw at 2.5px per mm. Type: "IBM Plex Sans Condensed" 500, uppercase, tracking 0.06em, for notes and the title block; "IBM Plex Mono" 20px for dimension values, which must agree with the geometry.
Sheet furniture: double border, zone letters A–D and numbers 1–6 in the margin, title block bottom-right (maker, part, drawing HI-0420-A, scale 1:1, units mm).
Motion follows drafting order, construction before form. Centerlines shoot out from the center (0.3s, easeOutQuad). Circles sweep like a compass from 12 o'clock (0.4–0.6s, easeInOutSine). Dimension lines grow from their midpoint to both arrows; values then type on at 30ms per character. Gears mesh: derive every angle from t and the tooth counts. The camera drifts like a reader's eye, never past 6% zoom.
Authentic means real drafting conventions a machinist could read; cheap means a glowing sci-fi hologram.
Banned: neon glow, HUD rings, 3D wireframes, colored fills, gradients beyond the paper, handwriting fonts, numbers that disagree with the drawing.
</direction>

<structure>
- 0–1.0s: border, zone marks and title block draw; the grid fades up.
- 1.0–2.2s: centerlines and construction circles.
- 2.2–4.2s: ring, planets, sun and carrier draw in that order; the housing gets a half-section hatch.
- 4.2–5.8s: dimensions Ø180 (ring pitch), Ø72 (sun pitch) and 63 (center distance); values type on.
- 5.8–7.8s: an input arrow lands on the sun; the train turns, easing to a stop by 7.8s; the carrier arrow and "i = 3.5 : 1" appear.
- 7.8–9.0s: balloons 1–5 with leaders; parts-list rows type into the title block.
- 9.0–10s: hold.
Other lengths: scale the beats proportionally and end on at least 1s of hold.
</structure>

<build>
One self-contained index.html (inline CSS and JS; Google Fonts via <link> are fine), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Draw in SVG; three.js isn't needed.
window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end to the last frame. No CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames. Mottling and grain come from a fixed-seed PRNG (anything that changes per frame seeds from the frame number); never Math.random.
With no ?render in the URL, call seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style: teeth meshing without overlap, arrowheads touching extension lines, every dimension matching the geometry, leaders never crossing. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…

Isometric Hairline

Made by us

A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels fro…