ankra-orb

The Ankra mark as a thinking orb: drawn in dots, depth-shaded, monochrome, alive.

Live demo: https://misterharrow.github.io/ankra-orb/

import { AnkraOrb, ThinkingOrb } from '@/components/ankra-orb' // website
import { AnkraOrb } from '@/implementations/elements/ankra-orb' // portal

<AnkraOrb />                                         // idle, 64px, hover-reactive
<AnkraOrb state="working" size={20} color="white" /> // loader in a button
<AnkraOrb state="thinking" size={32} />              // agent / AI activity
<AnkraOrb state="from-searching" size={32} />        // stock globe → Ankra mark → globe
<AnkraOrb state="emoji-euro" size={64} />            // € eyes → Ankra mark → € eyes
<AnkraOrb size={220} intro />                        // hero: orb settles into the mark
<ThinkingOrb state="searching" size={20} />          // the stock orbs ship alongside

States

state	motion	use
idle	breathes on a 10s cycle; the three pieces float on separate planes	logo, hero, brand moments
working	the pieces turn a third around the centre and lock back in place	loaders, pending operations
working-2	breathes in to a single point, glows there, breathes back out to full size	loaders where turning feels busy
thinking	the mark dissolves into a dotted orb, turns, and reforms	agent / AI reasoning
searching	a scan band sweeps the mark, lifting the dots it passes	indexing, lookups, filtering
emoji-<face>	a dotted emoji streams into the mark and back (see below)	reactions, feedback, playful moments
from-<stock>	a real thinking-orbs state plays, its dots stream into the mark, hold, and stream back out	AI / agent activity with the brand in it

Emoji → Ankra

state	face
emoji-happy	smile; bounces and the grin widens on each beat
emoji-sad	inner brows raised, frown; a tear rolls down the cheek
emoji-confused	one brow up, mismatched eyes, wavy mouth; the head wobbles
emoji-wink	lopsided smile; one eye snaps shut, holds, reopens, head tilts
emoji-euro	€ eyes and an open grin; the € eyes pop on a ka-ching beat

Same 7.2s hand-off as the stock states: face for 2s → streams into the mark → mark for 2s → streams back out. The faces are drawn in dots on a slightly domed disc, so they sway and depth-shade like the mark. Under reduced motion they show the still face.

Stock orb → Ankra

from-working, from-searching, from-solving, from-listening, from-connecting, from-weaving, from-composing, from-breathing, from-shaping — one for every stock state.

The orb part is the library's own geometry at its own tuned speed (MODE_FRAMES + resolvePreset), not a lookalike. Every 7.2s: orb for 2s → its dots stream into the mark (1.3s) → mark for 2s → the mark streams back out (1.3s) → orb. Dots are paired by walking both shapes around the centre, so the hand-off reads as a sweep; when the counts differ, dots split or merge. Leaving the orb, every dot departs from exactly where the live orb was; returning, every dot lands exactly where the live orb resumes. Under reduced motion these states show the still mark.

Props

prop	default
state	'idle'	any state above
size	64	CSS px. Dot density is re-tuned per size: one dotted rail per stroke at 20–43px, a halftone at hero sizes
theme	'auto'	auto follows a .dark / data-theme ancestor, then the OS
color	grayscale	any CSS color incl. currentColor; the depth ramp is kept on the tint
speed	1	multiplier
paused	false
interactive	size >= 40	hover tilts toward the pointer, lifts the dots under it, lets the pieces drift apart; a tap sends a ripple
intro	false	play the orb → mark settle once on mount
startAt	shared clock	run on the instance's own clock, starting this many seconds into the state's cycle (e.g. 3.3 starts a hand-off state on the mark). The demo's showreel uses it

All other <canvas> props pass through.

How it plugs into thinking-orbs

ankraFrame(state, size, t, input) implements thinking-orbs' ModeFrame contract: pure geometry in, a finished z-sorted dot list out. Up to 64px, <AnkraOrb> simply renders <ThinkingOrb frame={…}>, so the library owns painting, theme detection, tint, offscreen pausing and reduced-motion. Above 64px (the library's largest canvas) a small loop paints the same frames with the same ink ramp and the same lifecycle rules.

The mark is three congruent pieces at 120°. Piece A is traced from the master logo; B and C are exact rotations, which is what lets working loop seamlessly.

Editing

src/ here is the source. sh sync.sh copies it into:

• ankra-website/src/components/ankra-orb/
• portal/src/implementations/elements/ankra-orb/

Both apps depend on thinking-orbs@^0.3.2.

npm install
npm run dev        # gallery of every state × size at http://localhost:5288
npm run typecheck
npm run deploy     # build the gallery and publish it to GitHub Pages (gh-pages branch)

Orb rendering: thinking-orbs by Jakub Antalik (MIT).