Thinking Mark

Written for the variant you picked above: Arc Mark

Build a dark-mode working indicator for an AI assistant: the assistant's own logo shows that it is working, phase by phase, beside the phase word. Each version is its own component with the same props: brand (claude, chatgpt or grok — selects the logo, its name and its colours: a mark fill, a glow, a hot core and a caption hint), phase (thinking, planning, coding, done), size (inline beside the phase word in a chat reply, or hero — large, above a mono caption pill reading BRAND · Phase, with the brand uppercase and widely tracked, 5px 11px padding, 7px radius, a hairline border on near-black), labels (override the phase words) and motion. Every version shares a contract. The phase word reads "Thinking…", "Planning…", "Writing code…" or "Done" in 15px grey, and while working a shimmer — a 260%-wide gradient grey → hint → grey clipped to the text — slides across it every 2.4s. The words sit in a polite status region with the assistant's name for screen readers, so each phase change is announced once. Phases blend rather than restart: the effect eases from one phase's behaviour into the next. Drawing happens on a canvas overlay larger than the logo (pointer-events none, additive blending, the full device pixel ratio up to 3 inline and 2 for hero), so light can leave the logo without moving the layout. Where a version follows the logo's shape, it samples the SVG path once with getPointAtLength in a hidden <svg> (every 0.1 units of the 24-unit grid), starts a new contour wherever two samples jump apart, gives each sample an outward normal (step along it and flip it if isPointInPath says inside) and caches the result per logo. Bolts are midpoint displacement: each pass splits every segment and pushes its midpoint sideways by up to the current roughness, which shrinks to 55% each pass. The animation loop runs only while the indicator is on screen (IntersectionObserver) and the tab is visible, and stops completely once done has settled. Reduced motion: no moving light, a steady glow at the phase's level, and no shimmer. Brands: Claude — the starburst mark in #D97757, light that glows #E8835C with a #FFC7AE core, caption hint #F6C3AE. ChatGPT — the OpenAI knot in #ECECEC, electric-blue light: glow #3FA2FF, core #D4ECFF, hint #B9DCFF. Grok — the xAI mark in #E6E6E6, white light: core #FFFFFF, cool glow #C9D2DE, hint #FFFFFF. Show it in a working chat: a thread above a composer (22px radius, near-black, hairline border) with a model picker (Claude Opus 5.5, Claude Sonnet 5.5, GPT-6 Luna, GPT-6 Astra, Grok 4.7 — the model sets the brand), a reasoning picker (Low, Medium, High: 1.6s, 3s or 4.8s of thinking) and an access picker (Read only skips writing code; Ask first and Full access don't), and a round send button in the brand colour that turns into stop while a reply is working. Each reply starts with the inline indicator: thinking, then planning for 2.4s, then writing code for 3.6s, then done, labelled "Worked for Ns", with the answer fading in under it. The large indicator sits above the thread, follows the latest reply and rests on "Ready" between turns. The first message sends itself so the page opens mid-reply. Selected variant — Arc Mark (arc-mark): Arc Mark: The assistant's logo with electricity crawling along its outline, plus the phase word beside it. Inline: a 20px mark, 0.55em gap, then the phase word ("Thinking…", "Planning…", "Writing code…", "Done") in 15px grey with a shimmer: a 260%-wide gradient grey → hint → grey clipped to the text, sliding across every 2.4s while working. Hero: a 132px mark above a mono caption pill (5px 11px padding, 7px radius, hairline border, near-black fill) reading BRAND · Phase, the brand uppercase with wide tracking. Outline: draw the logo's SVG path in a hidden <svg>, sample it with getPointAtLength every 0.1 units of its 24-unit grid, and start a new contour wherever two samples jump apart (a new subpath). For each sample take the tangent from its neighbours two samples away, and an outward normal: step 0.25 units along it and flip it if isPointInPath (even-odd) says that's inside. Cache per logo. Place arcs on the outer part of the mark (more than 5 units from its centre), where they cross nothing. Bolts: midpoint displacement between two points — each pass splits every segment and pushes the midpoint sideways by up to the current roughness, which shrinks to 55% each pass. A crawling arc follows a contour for its length, sampled every 2.2px (3.4px hero), stood 1.5px (3.4px hero) off the edge give or take 30% and jittered across it by 1.2px (2.6px hero), both scaled by a sine taper so it rises out of the edge and back. A fork leaves the edge halfway between the normal and the direction away from the mark's centre, so it flies off instead of into a neighbouring spoke: 3–7px long (10–30px hero). A canvas overlay extends 8px (44px hero) round the mark, pointer-events none, at the full device pixel ratio up to 3 (2 for hero). Draw additively: a glow stroke (2.3px, 4.2px hero) at 55% with a halo blur of 4px (16px hero), then a core stroke (1px, 1.5px hero). Phases blend, never restart: thinking keeps 2 streamers 5–11 units long that live 0.35–0.8s, drift 4 units/s and re-jitter every 75ms (10% fork); planning keeps a single 5-unit arc that leaps every 0.17–0.23s — to the next subpath, or 1/13 of the way round a single-contour mark — with a bolt across the jump that fades in about 140ms and the last three positions fading behind it; coding keeps 5 streamers 4–12 units long that live 0.12–0.4s, drift 12 units/s and re-jitter every 40ms with a 32% fork, and on 18% of re-jitters (30% hero) a bolt leaps between two nearby edges 2–6.5 units apart on different parts of the outline; done draws one arc round every contour over 0.55s, then fades it over 0.4s. Retiring streamers finish their lives, so counts change smoothly. A level (0.5 thinking, 0.65 planning, 1 coding, 0 done, eased) sets a drop-shadow halo on the mark in the glow colour. Run the loop only while the mark is on screen (IntersectionObserver) and the tab is visible, and stop it once done has faded. Reduced motion: no arcs, a steady halo at the phase's level and no shimmer. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Pick a model, reasoning level and access, then send a message; the reply's indicator moves through thinking, planning, writing code and done. In your app, set phase as the assistant works, and the indicator follows. Motion: Light re-jitters every 35–75ms and each phase blends into the next; done settles in under a second and the loop stops. Reduced motion shows a steady glow only. Accessibility: The phase words are a polite status region that gives screen readers the assistant's name first, so phase changes are announced once; colour is never the only signal. The logo and canvas are hidden from assistive tech. In the demo chat, the pickers are menu buttons with arrow-key navigation and Escape to close. Responsive behavior: Inline sits on the text line in a chat row; the large size needs about 230–290px square plus its caption. Light draws outside the logo without moving the layout, and the chat's pickers tighten on narrow screens. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Pick a model, reasoning level and access, then send a message; the reply's indicator moves through thinking, planning, writing code and done. In your app, set phase as the assistant works, and the indicator follows.

Motion

Light re-jitters every 35–75ms and each phase blends into the next; done settles in under a second and the loop stops. Reduced motion shows a steady glow only.

Accessibility

The phase words are a polite status region that gives screen readers the assistant's name first, so phase changes are announced once; colour is never the only signal. The logo and canvas are hidden from assistive tech. In the demo chat, the pickers are menu buttons with arrow-key navigation and Escape to close.

Responsive

Inline sits on the text line in a chat row; the large size needs about 230–290px square plus its caption. Light draws outside the logo without moving the layout, and the chat's pickers tighten on narrow screens.