Mechanical Keyboard

About this style

Custom mechanical keyboards are built by hobbyists from a case, a plate, a circuit board, individual key switches and a set of keycaps. Every key has its own switch with a spring and a stem, and linear switches travel straight down without a tactile bump or click; enthusiasts lubricate them by hand and choose plate materials and mounting styles, such as gasket mounts, for sound and feel. A 65% layout keeps the letters, numbers and arrow keys but drops the function row and number pad. Per-key RGB lighting, from an LED under each switch, is common on gaming and enthusiast boards.

Make a 10-second 3D product film of a custom mechanical keyboard: the keycaps lift to show their switches, a lighting wave rolls across, and five key presses type a word.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Tallow Keyworks (fictional).
- Title: "Tallow 65"
- Tagline: "Hand-lubed linear switches on a brass plate."
- Typed word: thock
- Spec lines: "68 keys · 65% layout" · "Gasket-mounted brass plate" · "Linear switches, 45 g, hand-lubed" · "PBT keycaps, dye-sublimated"
- Length: 10 seconds.
</inputs>

<direction>
- Look: an evening desk product shot: a warm lamp pool on a plum felt mat, a sage aluminum case with oat and terracotta keycaps lit like a studio still, and lighting that glows up from under the caps instead of being painted on them.
- Palette: wall #241A27 with a warm #4A3036 lamp pool behind; desk mat plum felt #3B2840 with a stitched edge #5B4361; case anodized sage #8E9F89 with chamfer highlights #C9D6C2; brass plate #B8914B; switch bottom housings milky #E9E4DA, top housings clear; stems coral #FF7062; springs steel #C9CDD2; keycaps oat #E8DFCF (alphas), terracotta #C5643F (modifiers), mustard #E2A733 (Enter and Esc); legends ink #2B2A28, cream #F6EFE2 on terracotta; the lighting uses one four-stop ramp only: coral #FF6B5B, apricot #FFB04A, rose #FF5FA2, lavender #9C7BFF; UI card #F6EFE2 at 92% with ink text; type #F6EFE2, secondary #BFA9B8, accent apricot. The warm caps sit on cool sage and the ramp's warm light pools on plum felt: no black anywhere.
- The keyboard, built like the real thing (1 unit = 1 mm, key pitch 19.05):
  - layout, 68 keys, 16 units wide: row 0: Esc, 1–0, -, =, Backspace (2u), Del; row 1: Tab (1.5u), Q–P, [, ], \ (1.5u), PgUp; row 2: Caps (1.75u), A–L, ;, ', Enter (2.25u), PgDn; row 3: Shift (2.25u), Z–/, Shift (1.75u), ↑, End; row 4: Ctrl, Super and Alt (1.25u each), Space (6.25u), Alt, Fn, Ctrl, ←, ↓, →;
  - case: a machined aluminum tray 316 × 106 with 4 mm walls, a 7° typing angle, 1 mm chamfers on the top edges that catch a bright line, corner radius 6, a recessed port at the back and rubber feet;
  - plate: brass, 1.5 thick, with a 14 × 14 cutout per switch, dark grey gasket strips between plate and case;
  - switches: a milky bottom housing, a clear top housing (MeshPhysicalMaterial, transmission 0.9, roughness 0.15), a coral cross stem, a steel spring (a TubeGeometry helix) visible through the clear top, and an LED window on its north side;
  - keycaps: sculpted per row (row 0 tallest and tilted back, row 4 tilted forward), each a rounded, tapered cap with a cylindrical dish on top (a subdivided RoundedBoxGeometry deformed per vertex), matte PBT (roughness 0.62, a fine grain normal map), legends in a CanvasTexture in Rethink Sans 600, top-left on alphas and centered on modifiers; stabilizers under Space, both Shifts, Enter and Backspace (two wire bars each).
- Lighting from below, the way the real thing glows: each switch has an LED under its clear housing. Don't light every key with a real light. Per key, set an emissive on its clear top housing and LED window, add a soft additive glow quad on the plate under the cap, and add a thin rim glow on the cap's lower skirt facing its LED (a shader term driven by that key's light color), so light leaks from the gaps and the undersides of the caps, never from their tops. The case's inner walls pick up 10% of the nearest keys' color. Colors come only from the ramp, interpolated in linear color. A gentle UnrealBloomPass (strength 0.4, radius 0.5, threshold 0.82) blooms only the LED leaks, then OutputPass.
- The wave: a diagonal band rolling across the board from lower left to upper right at 380 mm/s, its color stepping through the ramp across its width, period 1.8 s. Each press sends a ring of the ramp's next color out from its key (radius growing at 260 mm/s, fading over 0.6 s).
- Key press, like a real linear switch: cap and stem travel 4.0 down in 0.06 s on cubic-bezier(0.5, 0, 0.75, 0), hold 0.04 s at bottom-out, then return over 0.16 s on a spring 1 − e^(−22s)·cos(30s) with 0.2 of overshoot; the spring compresses with it, and the plate dips 0.15 at the key (gasket flex) and recovers.
- The lift: in a wave from left to right (30 ms per column), every cap rises 22 above its switch on easeOutCubic over 0.4 s, holds 0.6 s and lowers back, so the clear housings, coral stems, springs and stabilizer wires read.
- Light and set: a warm key SpotLight #FFE2C0 at 3.0 from the upper left (angle 40°, penumbra 0.8) with soft shadows (PCFSoftShadowMap, 2048); a HemisphereLight #FFE9DA / #2B1E2E at 0.7; RoomEnvironment through PMREMGenerator at envMapIntensity 0.4 so the chamfers and the brass show highlights. ACESFilmic, exposure 1.1. With the lighting off, the keyboard still reads clearly in the lamp pool from the first frame.
- Camera: fov 30, one continuous CatmullRom path on easeInOutSine, never inside geometry: a low three-quarter hero view of the whole board (about 1100px across, centered at (1180, 640)); a dive to a close side view along row 2 for the lift; back to the hero view for the wave; drifting in close over T, H, O, C and K for the typing; settling on the final hero view.
- UI (HTML): a text-field card above the board centered at (1180, 230), 560 × 96, #F6EFE2 at 92% with an 8px radius and a soft shadow, the typed word in Space Mono 400, 48px, ink, with a 2px apricot caret blinking at 1 Hz; each letter appears the instant its key bottoms out. A spec card at the left (x 120–560, y 520–860): the four spec lines in Rethink Sans 500, 24px, #F6EFE2, each with a small apricot bullet.
- Type: kicker "TALLOW KEYWORKS" in Rethink Sans 700, 20px, tracked 0.18em, accent; title Rethink Sans 800, 88px, #F6EFE2, top-left at (120, 110); tagline Rethink Sans 400, 28px, secondary, beneath. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: keys with real travel and spring return, switches you can see into, light that leaks from under the caps in a chosen palette, a board that's heavy aluminum and brass. Cheap: a rainbow-flooded black board, glowing cap tops, keys that shrink when pressed.
Banned: full-spectrum rainbow cycling, shine-through legends, black backgrounds, real brand names or logos on the keys or case, a mouse, hands, bloom on the caps or case, motion blur, anything flashing more than 3 times per second (the caret's 1 Hz blink is the fastest thing).
</direction>

<structure>
- 0.0–1.2s: the hero view in the lamp pool, lighting off; the kicker, title and tagline rise in.
- 1.2–2.8s: the camera dives to row 2; the caps lift in a wave from the left, showing switches, springs and stabilizers, then settle back as the camera rises.
- 2.8–4.2s: the lighting wakes from the left: the wave rolls across in coral, apricot, rose and lavender, glowing up through every switch; the text field fades in, empty, its caret blinking.
- 4.2–6.0s: close over the letters: T, H, O, C and K press at 4.4, 4.7, 5.0, 5.3 and 5.6 s, a ring spreading from each, and "thock" types into the field. At 6.0 s all five letters are in, every key is at rest and the wave keeps rolling.
- 6.0–7.4s: the camera eases back to the hero view; the spec lines rise in 0.15 s apart; Enter presses at 7.0 s and the caret stops beside a small apricot check.
- 7.4–8.6s: the wave slows to half speed and settles into a slow drift along the ramp.
- 8.6–10.0s: hold.
For other lengths, stretch the wave and the hero beats; keep the press timing and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Key travel, the lift, the wave and rings, the field's text and the camera are closed-form functions of t from the press times. Build each row's keycap geometry once at load (instanced where shapes match), draw the legend textures after the fonts load, and call composer.render() once per seek in place of renderer.render().
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the layout has 68 keys in the rows given, every pressed key travels down with its stem and springs back, each letter types the instant its key bottoms out, light shows from under the caps and through the clear housings and never on the cap tops, only the four ramp colors appear in the lighting, the board reads clearly before the lighting turns on, and the spec card and text field stay clear of the board. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

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

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…