Pulse Loader

再現プロンプト

発光リングのローダーがヒーローの装置へ着地し、白〜氷青のプラズマとレーザー映像を「点灯」する語とclip-pathアパーチャーで開閉して見せるNOVARCの1ページ。既存SVGは映像の発光オーバーレイ兼フォールバック。 配色・構成・動きの数値をまとめた指示書です。 お使いのAIに貼り、素材やお店の情報を伝えて実装してください。仕上がりは利用するAIと素材によって変わります。

Build a single self-contained HTML file (inline CSS/JS, normal window-scroll page) for "NOVARC" — a fictional directed-energy hardware brand. Use two local muted looping 16:10 MP4 files directly under the aperture media layers; preserve the existing CSS/SVG core and emitter visuals as restrained screen-blend overlays and fallbacks. CDNs allowed: GSAP core + ScrollTrigger only. The entire page shares one motion idea: "Instrument & Aperture" — a glowing containment ring is a live instrument that appears three times and every heading enters by igniting, while media panels open and close like a camera iris.

## Art direction
Background #14171A (loader overlay #16191D). Text: near-white #F5F5F5 headings, muted #ABABAB body copy. One accent color throughout: icy blue rgb(159,208,255) / #9FD0FF, used for every glow, border and instrument marking — never introduce a second accent. Two type families: a system sans-serif for headings/body (font-weight 700–800 for headings, tight letter-spacing -0.01em) and ui-monospace/SFMono/Menlo for every "instrument" text — eyebrows, the loader counter, gauge readout, spec values, CTA label, footer tag — always with wide letter-spacing (0.12em–0.32em) and often wrapped in literal parentheses, e.g. "( 42 % )", "( SCROLL DOWN )", "( 48.2 kW )". Panels/cards get thin 1px borders at 20–30% accent opacity with small 18px L-shaped corner brackets (two of the four sides only) at each corner, reinforcing a measuring-instrument frame. Never use a plain vertical fade-up entrance anywhere on the page — text always enters via an opacity + text-shadow "ignite" and media panels always enter via clip-path.

## Section 1: Full-screen loader (overlay, removed after ~3.25s)
Fixed/absolute full-viewport overlay, background #16191D, z-index above everything. Centered: a 220px "energy ring" — an SVG bezel (two concentric circles r=94 and r=78 at 22%/50% accent opacity) with 48 tick marks around the outer circle (every 6th tick longer/brighter = a major tick), the tick group rotating continuously 360deg/22s linear; a conic-gradient "radar sweep" wedge (from 0deg, accent 32% opacity fading to transparent at 22%) layered on top, rotating 360deg/5.5s linear with mix-blend-mode screen; and a bright core circle (34% of the ring's box) with a white-to-accent radial gradient and a triple box-shadow glow: 0 0 26px 6px rgba(255,255,255,0.92), 0 0 72px 24px rgba(159,208,255,0.55), 0 0 150px 50px rgba(159,208,255,0.22). During loading the core's opacity and scale are driven directly by the load progress (opacity 0.35→1, scale 0.82→1) so the ring visibly "charges up". Below the ring, centered near the bottom (9% from bottom): a small label "( CORE CALIBRATION )" in monospace at 0.66rem/0.32em letter-spacing, and beneath it the counter itself, "( 0 % )" through "( 100 % )", monospace, 1.15rem, tabular-nums, with a soft text-shadow glow (0 0 16px accent at 55% opacity). Animate a numeric object from 0 to 100 with GSAP over 2.2s using ease power2.out, writing the rounded value into the counter text every frame. On completion, hold at "( 100 % )" for 0.15s, then: fade the backdrop + counter + label to opacity 0 over 0.6s (ease power1.out), and simultaneously FLIP-animate the ring from its loader position to the hero's ring slot: measure both elements' bounding rects, compute the delta x/y between their centers and the width ratio as scale, and tween the ring wrapper's x/y/scale to those values over 0.9s with ease power3.inOut. 0.55s into that flight, cross-fade in a second, already-present ring sitting in the hero slot (opacity 0→1 over 0.35s) so the flight's landing frame and the hero ring are pixel-identical and the hand-off reads as one continuous ring, not a swap. After max(0.6s, 0.9s) the loader overlay is removed from the DOM entirely and the hero heading ignites. This whole sequence replays every time the page (re)loads — it does not need to be gated by localStorage.

## Section 2: Hero
Full viewport height, radial-gradient background (ellipse 90% 70% at 50% 38%, #1c2229 to #14171A). Centered content: a 260px hero-visual box (perspective: 800px) containing a soft floating halo (radial-gradient accent 16% opacity blurred, drifting ±8px/±4px over 9s ease-in-out infinite alternate) and the hero ring slot holding a 176px copy of the same energy-ring component (transform-style preserve-3d). On pointer move over the hero-visual box, tilt the ring slot up to ±16deg on rotateX/rotateY based on cursor position relative to the box center (duration 0.6s power3.out, overwrite auto), resetting to 0/0 over 0.8s power3.out on pointer leave — this is the page's required mouse-reactive element, framed as the instrument "tracking" the viewer. Below the ring: eyebrow "NOVARC / DIRECTED ENERGY SYSTEMS" (monospace, 0.3em tracking, accent at 75% opacity); an H1 heading made of 4 individually-tagged word spans — "LIGHT," "DISCIPLINED" "INTO" "FORCE." — each starting at opacity 0 with no text-shadow and, right as the ring lands (~t=3.25s), animating to opacity 1 with text-shadow "0 0 14px rgba(255,255,255,0.9), 0 0 38px rgba(159,208,255,0.6), 0 0 78px rgba(159,208,255,0.3)" over 0.6s each, staggered 0.12s apart, ease power2.out — this word-by-word "ignition" is the page's signature text-entrance and must be reused (with slightly smaller glow, see below) on every other heading on the page. After the heading finishes, fade in (opacity 0→1, 0.7s, stagger 0.1s, power1.out) the eyebrow, the subhead paragraph ("We contain coherent light inside a magnetic-thermal core and route it as work — cutting, welding, and relay, wherever raw energy needs a straight line.") and a scroll cue "( SCROLL DOWN )" pinned near the bottom, which pulses forever afterwards (opacity 0.45↔1 with a text-shadow glow appearing at the peak, 2.4s ease-in-out infinite).

## Section 3: Principle (aperture panel — radial iris)
Centered heading block using the same word-ignite treatment but scroll-triggered instead of timeline-triggered: wrap each word in the shared lit-word class, set opacity 0 / no text-shadow by default, and on ScrollTrigger enter (trigger the heading's group, start "top 78%", toggleActions "play none none reverse") animate to opacity 1 and text-shadow "0 0 10px rgba(255,255,255,0.8), 0 0 26px rgba(159,208,255,0.45)" over 0.5s per word, staggered 0.08s, power2.out; reverse (opacity 0, no shadow, 0.3s power1.in) on scrolling back past the trigger. Eyebrow "PRINCIPLE // CORE CONTAINMENT" and a body paragraph fade in similarly (plain opacity 0→1 over 0.6s on enter). Below the text: a 560px-max, 16:10 aperture frame (1px accent-tinted border, 6px radius, four corner brackets) containing a "core visual" — a rotating repeating-radial-gradient ring pattern (60s linear), a vertical white/accent glowing beam down the center, and a horizontal glow band sweeping top-to-bottom every 4.5s. The whole media element has clip-path: inset() animated by a single GSAP timeline attached to a scrub ScrollTrigger (trigger = the section, start "top bottom", end "bottom top", scrub 0.6): tween 1 opens the aperture from inset(38% 38% 38% 38%) to inset(4% 4% 4% 4%) (duration 1, power2.inOut), tween 2 closes it back to inset(38% 38% 38% 38%) (duration 1, power2.inOut) — so as the section travels through the viewport the panel visibly opens and then closes again, like a shutter, never staying static.

## Section 4: Output telemetry
Same word-ignite heading ("Every watt, accounted for.") and eyebrow "OUTPUT // LIVE TELEMETRY". Below, a two-column layout: (a) a semicircular analog gauge — a 240×130px dial with border-radius 240px 240px 0 0, 9 tick marks fanned from -90deg to 90deg, a glowing needle (2px wide, gradient white-to-accent, box-shadow 0 0 10px 2px accent 70%) pivoted at bottom-center, and a numeric readout below reading "( n.n kW )". A pulsing radial glow sits behind the dial (scale 0.94↔1.06 opacity 0.7↔1 over 4s ease-in-out infinite alternate) so the instrument is never fully static even at rest. Both the needle rotation (mapped linearly from -90deg to 90deg) and the readout value (mapped linearly from 6.4 kW to 48.2 kW) are driven directly by a scrub ScrollTrigger's progress (trigger the section, start "top 70%", end "bottom 30%", scrub 0.4) — this is a continuous live-telemetry read tied to scroll position, not a one-shot count-up animation. (b) a definition list of 4 spec rows (label left, value right, separated by a hairline border): BEAM CLASS / IV COHERENT, WAVELENGTH BAND / 1030–1070 NM, DUTY CYCLE / CONTINUOUS, CONTAINMENT / MAGNETIC + THERMAL — the value of each row uses the same ignite glow as headings, revealed with a 0.1s stagger across the four rows when the group scrolls into view. Do not use numbered list markers (01/02/03) anywhere on the page, and do not implement any stat as a count-from-zero animation — only the loader's percentage and this gauge's live scroll-linked telemetry are allowed instrument-style numbers.

## Section 5: Deployment (aperture panel — horizontal shutter)
Word-ignite heading "One core. Many emitters." and eyebrow "DEPLOYMENT // FIELD ARRAY", body copy about a distributed emitter array. A second aperture frame, same corner-bracket styling, but this one is a 6×4 grid of small circular "emitter" nodes over a faint grid-line background; each node pulses independently (background + box-shadow glow, 3.2s ease-in-out infinite, each cell offset by column×0.12s + row×0.18s so the array ripples). Its clip-path scrub is intentionally on a different axis from Section 3 to read as a distinct mechanism: closed state inset(48% 4% 48% 4%) (a thin horizontal slit) opening to inset(4% 4% 4% 4%) and back, same 2-tween/scrub-0.6 pattern as Section 3.

## Section 6: Footer
Radial-gradient background echoing the hero. A third, small (64px) copy of the same energy ring as a standalone brand mark, a word-ignite H2 ("Ready to route the beam?"), a CTA link styled as an instrument button — monospace label "REQUEST SPEC SHEET →", 1px accent border, transparent fill, on hover fills solid accent with dark text and a 30px accent glow, lifts -2px, all over 0.3s ease — and a closing monospace tag "( TRANSMISSION END )" at 0.68rem, 0.28em tracking, accent at 50% opacity.

## Scroll animations (shared rules)
Every text entrance on the page uses the ignite pattern (opacity + text-shadow glow, word-level stagger for headings, no y-transform anywhere) or plain opacity fades for supporting copy — never combine opacity with a vertical offset. Every media panel entrance uses a scrubbed clip-path inset() open-then-close timeline, never a static one-way reveal. Use ScrollTrigger toggleActions "play none none reverse" for one-shot ignite reveals so scrolling back up reverses them, and scrub timelines (0.4–0.6) for anything continuous (apertures, gauge).

## Performance & accessibility
Cap devicePixelRatio effects to none (this page is DOM/CSS/SVG only, no canvas). Respect prefers-reduced-motion: reduce by shortening the loader to ~0.7s total with no FLIP flight (the hero ring simply appears), showing all text and gauge values instantly with no stagger, opening (not scrubbing) both aperture panels to their open inset permanently, and disabling every infinite CSS keyframe (ring ticks/sweep, halo float, scroll-cue pulse, core-visual rotation/scan, emitter pulses, gauge glow). All decorative SVG/CSS elements use aria-hidden; the CTA and any interactive controls remain keyboard-focusable with a visible focus outline in the accent color.


## Current video loading contract
This supersedes earlier blanket autoplay/preload instructions. Keep a real still frame from each background clip as its loading, failure and reduced-motion poster. Do not attach the MP4 URL or call play until the actual picture/scene is visible and needed. Use muted, loop, playsInline and initial preload=none; pause offscreen and in hidden tabs, and remove the source on teardown. A late play promise must not restart a stopped clip or pause a newer owner of the element. After rejection, keep the poster and retry on re-entry instead of retrying each animation frame.

## 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": "pulse-loader",
  "brand": "NOVARC",
  "accent": "#31576f",
  "title": "Instrument specification brief",
  "intro": "A concept instrument for exploring energy-system interfaces. This brief separates the interface demonstration from engineering qualification.",
  "facts": [
    [
      "Interface",
      "Calibration progress, containment status and power-state readouts"
    ],
    [
      "Integration scope",
      "Console UI, event log and operator state model"
    ],
    [
      "Qualification",
      "Concept only; performance and operating limits are not certified"
    ]
  ],
  "notes": [
    "Included in this brief: calibration → ready → running → safe-stop states, with explicit timeout and fault recovery requirements.",
    "A real specification must identify operating limits, test results, interfaces and service requirements. The visual readouts here are illustrative."
  ]
}

- 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.