Glyph Liquid

再現プロンプト

MOLTENのタイプスタディ。実際に同梱した4書体を同じ文章・サイズ・太さ・字間で比較し、選んだ書体を巨大な液体グリフへ反映。元の字形との比較、動き停止、設定と文章を引き継ぐ相談を備える。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Create MOLTEN, a fictional studio exploring type and motion. Build a complete responsive site with real editable type specimens, one liquid glyph and a working project-planning flow. The site presents existing typefaces honestly; it does not sell four invented font families or claim custom client commissions.

ART DIRECTION
Warm paper #fafaf8, ink #15140f, ember accent #b64a20, hairline rgba(21,20,15,.16). Use the actual bundled Fraunces at weight 500 for editorial headings, a restrained sans for body and controls. Heading: “Type, before it sets.” Follow with “Character, in every sense.”, “Feel the difference.”, “From a feeling to a system.” and “What should your type say?” Keep the moving letter separate from readable text. No testimonial cards, invented establishment date, fake email address or two-week delivery promise.

REAL TYPEFACES
Use the following existing local WOFF2 files without changing their bytes. FontFace CSS aliases identify this page's instances; show the actual typeface name in the UI. Source hashes, verified weight axes and common character coverage are recorded in glyph-liquid/font-data.json, generated by scripts/build-molten-font-data.mjs from the actual font tables. Credits and licence texts remain under /fonts/. Do not substitute system fonts while presenting them as these fonts. The skill distribution includes these exact files and licences in references/demo-assets/glyph-liquid/. Copy that fonts/ folder to the new site public root and keep font-data.json for validation. A prompt copied from the website also needs those assets from the distribution. The asset handover is not a complete site source or a verified reproduction.
Fraunces / Expressive serif
Family alias: "MOLTEN Fraunces"; style: normal; URL: /fonts/fraunces-88e17be075f1be50.woff2
Soft detail, generous curves and a distinct editorial voice.

Space Grotesk / Measured sans
Family alias: "MOLTEN Space Grotesk"; style: normal; URL: /fonts/space-grotesk-a0d054c4af557de2.woff2
Open shapes and a clear rhythm for contemporary identities.

JetBrains Mono / Even rhythm
Family alias: "MOLTEN JetBrains Mono"; style: normal; URL: /fonts/jetbrains-mono-2c32b9b3ee358c11.woff2
Consistent character widths for data, labels and precise details.

Newsreader Italic / A quieter gesture
Family alias: "MOLTEN Newsreader"; style: italic; URL: /fonts/newsreader-19a83cc7ce02aab9.woff2
A flowing italic for a quotation, a title or a change in voice.
All four files have a genuine variable weight range covering 400–700. Register FontFace with that weight range and the correct normal/italic style. Total source size: 154,720 bytes, already bundled. Load independently with a 12-second deadline. Only install a loaded face while the current attempt still owns it; discard late loads after retry/disposal. Remove owned FontFace objects at teardown. A failed specimen says which font could not load and offers Retry typeface while the other specimens remain usable. Do not show a substitute under an unqualified real-font label.

EDITABLE COMPARISON
A labelled textarea starts with “A little less.\nA lot more felt.” Preserve the editing draft until Apply text. Validate nonempty text, up to 160 Unicode characters, and the common coverage of all four font files. A failed submission leaves the last valid comparison in place, retains the draft and explains missing characters. Keep native textarea editing and composition behaviour.
Provide shared native ranges: size 24–88px, weight 400–700 in steps of 25, letter spacing -.04–.12em in .01 steps. Four specimen cards display the identical text at those exact settings, with their actual font/style; retain line breaks, wrap long words and do not crop the text. Each has a native radio to select a direction. Show the selected face below, with Try in motion, Use this direction, Save direction notes and Reset specimens. Saving notes records the exact text, real font name, style, size, weight and tracking. These are notes, not generated font files.

ONE LIQUID GLYPH
A single Three.js quad renders a large M/O/L/T/E/N using the currently selected face and weight. Each needed letter owns a 1280×1280 transparent canvas. Set the exact loaded font, measure actualBoundingBoxLeft/Right/Ascent/Descent and fit its actual ink bounds inside a 1024px square, then centre those bounds on the canvas. Draw the glyph in white. Use CanvasTexture with NoColorSpace, generated mipmaps, LinearMipmapLinearFilter minification, LinearFilter magnification and anisotropy min(8, renderer maximum). Keep the measured 1280px mask unchanged. Sample ALPHA as coverage; white RGB is not antialias coverage. This is a bitmap coverage mask, not an approximate MSDF or a true signed-distance field.

Keep at most two glyph textures, outgoing and incoming. Regenerate for an actual face/weight/letter change, release textures no longer participating, and honour the last rapid selection. Crossfade the two alpha masks over .9 seconds with smoothstep progress. Do not threshold their mixed coverage: that would collapse one letter halfway through the fade. Blend their alpha-weighted ink/accent colors and divide by the resulting alpha. Add a narrow warm edge using 1-smoothstep(0,.12,abs(coverage-.5)) with a maximum .55 accent mix. Supply linear THREE.Color uniforms, then colorspace_fragment at output. Derive a screen-space normal from dFdx/dFdy(alpha)×3 before any discard, plus a shallow sinusoidal tilt (.28/.22) and the same ripple slope×.4. Add two fixed Blinn-Phong lights at [−.45,.7,1] and [.75,−.3,.7], second strength .45; shininess 56+40×energy, second exponent ×.7, specular strength .32 and warm [1,.91,.78] reflection. Add accent Fresnel power 3, strength .28. Multiply the entire finish by uDistortion, so original comparison has no extra metallic treatment and paused liquid retains it. Keep the alpha/crossfade formula unchanged; no extra texture samples, environment or postprocessing pass.

Preserve the page's liquid ripple: contain-fit UVs at .86 of the shorter stage side; a radial Gaussian radius .34, spatial frequency 26 and wave speed 3.4, with maximum .05 UV displacement. Idle drift amplitude .006, time frequencies .35 and .28. Pointer UVs come from the picture's live DOM rect and are clamped to 0–1. Apply pointer movement only while motion is enabled; touch retains ordinary scrolling. Provide a native Ripple button for an equivalent centre impulse.
Use delta-time-correct damping: pointer retention .86^(dt*60), energy target retention .965^(dt*60), smoothed energy retention .82^(dt*60), with the exact coupled exponential update so 30/60/120Hz settle at the same rate. Clamp a frame delta to .05 seconds. Hold the clock, pointer and energy when paused or hidden; there is no elapsed-time jump on return.

ORIGINAL, STOP AND RECOVERY
Compare original sets both drift and ripple displacement to zero without altering the stored liquid frame. Return to that stored frame when comparison ends. Pause/Resume motion is always available; live prefers-reduced-motion stops motion entirely and commits letter selection immediately. The glyph still responds to the six letter buttons while paused. Follow page sections is an explicit checkbox. A manual letter selection turns it off, so the next scroll does not override the chosen letter.
Prepare a renderer only while its picture is visible and the selected font is ready. Release GPU resources outside the viewport or hidden document, and preserve the frame. Stop while the project dialog is open. Check partial construction, shader errors, context loss and the first draw after resizing. On GPU failure, show the real undistorted DOM glyph in the loaded font with Retry motion. Text, specimens and project controls remain usable. Retry focuses a stable control; asynchronous font retries must not steal focus after the user has moved elsewhere. Use an antialiased renderer with sRGB output, no 3D tone mapping and DPR at most 2, embedded previews at 1.

PAGE STRUCTURE AND MOBILE
Place the header outside the inner scroll area so its navigation remains visible without an overlay. Retain Try the type, Process, Commission and motion control on mobile. The desktop grid has six left-column sections and a right column spanning all six rows; its glyph panel is sticky for the height of the viewport. DOM order is hero, glyph panel, foundry, specimens, process, notes and contact. On narrow screens use that same order in normal flow, with a 480px glyph panel after the hero. Short desktop viewports use a non-sticky panel so all controls can be reached. Header height must reduce the available scroll height rather than cover content.
Map the six sections to M/O/L/T/E/N when Follow page sections is enabled. Native scroll and resize events determine the section at 55% of the viewport. Update only on input, coalesce through one requested frame and cancel on teardown. Section navigation positions and focuses the actual target inside the current scroller. Content is visible by default; the only body animation is a one-shot ink-rise clipping reveal on headings, skipped when paused/reduced or viewing a dialog. Focused content is never clipped by a reveal.

CONTENT AND COMMISSION
The four process steps are brief, real-copy testing, hierarchy/language planning and handover. Notes explain testing real words, comparing at the same size and giving motion a purpose. Use this direction and the footer commission CTA open the existing local two-option planner, including the chosen real face, style, text and all numeric settings in both review and saved output. Keep the dialog paper, ink and accent consistent with the page. Clearly identify MOLTEN as a fictional studio and the specimens as existing open-source typefaces. Unit tests and font-table checks do not establish browser rendering quality; verify actual font loading, weight interpolation, GPU edges, keyboard/touch, focus, zoom and public deployment separately.

## Action flow and content

Implement the following local planning experience for the primary CTA, in the visual language of the page. Use a real button opening a labelled modal dialog. Choosing a pricing card must preselect that exact plan. A navigation link may move to another section; a planning CTA must lead to its review flow.

Use this content for the dialog, including the option details and notes:

{
  "slug": "glyph-liquid",
  "brand": "MOLTEN",
  "accent": "#b64a20",
  "title": "Plan a type commission",
  "intro": "Describe the words, languages and places in which the typeface needs to work.",
  "facts": [
    [
      "Starting point",
      "Choose a focus, describe the audience and keep a scope brief."
    ],
    [
      "Review",
      "Scope, supplied material, timing and the intended use."
    ],
    [
      "Handover to discuss",
      "Specimens, a character-set schedule, font prototypes and proposed usage terms."
    ]
  ],
  "groups": [
    {
      "label": "Project focus",
      "options": [
        {
          "title": "Display family",
          "detail": "Expressive headlines and a limited character set for a focused identity."
        },
        {
          "title": "Brand type system",
          "detail": "Text and display use, a character-set plan and a specimen for reviewing legibility."
        }
      ]
    }
  ],
  "brief": "Describe the audience, the intended result, the material you already have and any timing constraints.",
  "notes": [
    "This is a local project brief. Scope, availability and any fee would be agreed in a separate conversation."
  ],
  "paper": "#fafaf8",
  "ink": "#15140f"
}

- Explain before input that this is a fictional brand sample: choices can be reviewed and saved, with no external submission, booking, payment or registration. Use each brand's language. Do not launch a mail client or present an installer for a fictional product.
- Give every option group a legend, inputs explicit labels and errors linked descriptions. Validate options against the allowed values, requested dates as actual dates from today onward, and free text as 10–2,000 trimmed characters. Blank spaces alone must fail. Tracking accepts the sample reference TG-2048 only.
- Focus the first invalid field and preserve every entered value. On success, show the selected option WITH its full detail, requested date or brief, relevant facts and notes. An edit action returns to the preserved form. Do not claim a real reservation, purchase or account has succeeded.
- Save the complete review as UTF-8 text. A browser download request is not proof of a file being written. On download failure, retain the full text in a labelled, selectable textarea and offer retry. Do not show a false success state.
- Constrain modal content to the viewport with internal scrolling. Support keyboard and touch, trap focus while open, close on Escape and restore focus to the exact initiating control. Keep these operations available with motion disabled.
- If a separate project-contact CTA is present, let it collect a project brief and review it locally; a product selection CTA must retain the product choice. Verify both flows independently.