cyan
One property per card
The tint reaches the shadow as well as the overlay. Tint only one and it collapses into a coloured smudge.
hologram ui components
scifi-ui
tap to activate
hologram ui components
tap to activate
A library of hologram and HUD parts for a dark page. Step rails, panels that boot up, a loading state that draws a cell, a modal surface, and a particle trace for media.
One rail, three stops, each reported on a holobar:change
event. Here it steps through three measured MICrONS viewers, carried across
whole from the Cortex page: the brain at true scale, the nine cell types, and
one spike crossing one synapse. Drag it, tap a tick, or arrow-key from the
whole brain down to a single spike. Each viewer loads its real meshes the
first time the rail reaches it, and only the one on screen renders.
two brains, one spacetrue relative size
Surfaces load when you reach them
Human cortex and cerebellum Mouse brain Mouse V1, inside the brain, where this volume was cut
The two buttons are for a keyboard: focus one and the arrow keys turn that brain, with shift for a bigger step. Every figure above is arithmetic on the bounding boxes recorded beside the meshes, so it moves if the surfaces are ever re exported.
nine cells, one volumedrag to turn, scroll to zoom
Meshes load when you reach them
Each cell is framed to the same size on screen so the shapes can be compared. Their real extents differ by more than a factor of ten, and that number is in the readout rather than in the framing.
one spike, one synapsethe route is measured
Both cells load when you reach them
Presynaptic cell, the one that fires Postsynaptic cell, the one that receives The synapse, and the origin of this scene
What this animation is not. There is no membrane model behind it: no millivolts, no channel kinetics, no refractory period. The spark takes four seconds to cross those two and a bit millimetres because that is long enough to watch, and a real spike would cross them in a few thousandths of a second. What is measured is the route and the distances. Both meshes were re extracted in one frame centred on the synapse, so the bright green point is a real place in a mouse brain.
The one 3D part. A three.js material that turns any mesh into a projected volume of light: near clear where it faces you, an electric cyan rim where you see it edge on, a lattice of sharp dots for the surface, and every so often a burst of interference that shivers the vertices and pulls the colour channels apart. No scanlines and nothing scrolls. The lattice sits in world space, so it holds still while the object turns, the way a projector's raster would. Every parameter is a slider; every mesh is real, two whole brain surfaces and the nine MICrONS cells from the rail above. Three eras sit on the one material: 2026 is that projected surface; 2076 gives it a volume, the interior glowing by how much object each ray passes through, and rings that run out from wherever you touch it; 2226 is a light field, an interference lattice whose nodes shift with your viewing angle and a diffraction spectrum at the rim. It also has a page of its own.
one mesh, one materialdrag to turn, scroll to zoom
The surface loads when you reach it
Fresnel is a silhouette effect, so a dendrite thinner than a pixel has no facing surface to be clear and no edge to glow. The cells load twice as close as the shells, with a preset that softens the rim and lifts the body, and say so in the code.
A hairline draws out from under a heading when it first comes into view, and draws again when you point at it or tap it.
Two bright heads run the border in opposite directions and meet, an inner backlight swells, and the panel resolves out of a blur. Once when it first comes on screen, and again every time you point at it or tap it. The masthead at the top of this page is the same component.
A thin line passes across a panel once when you point at it, tab into it or tap it, whatever the panel's height.
Near black ink instead of tinted glass, so the render pops. The rim and backlight live entirely in the box shadow, so nothing moves and the image is never repainted. Point at a card, or tap it, and a bright head runs the perimeter.
The EyeWire II sign in modal, reproduced. A drifting particle field, a
cycling gradient border, two counter rotating rings, and a materialise that
settles through a soft overshoot. A real <dialog> opened
with showModal, so focus is trapped and Escape closes it.
This is a visual component only. No authentication, no form element, nothing to sign into, and no request goes anywhere.
The cell from the sign-in dialog, drawn again as a loading state. Every branch grows outward from the soma while you wait, and only once the cell stands complete do the action potentials begin to travel it. The bar reports a real count when you have one, rather than inventing a number.
loading meshes
The EyeWire II researcher profile, the real component carried across whole: the tabs, the achievement badges, the streak and the trophy case. Open it, then click any badge for its detail, or tap a badge in the strip below to replay its award ceremony. A visual component: no account, nothing to sign into.
visual component only
Amy Sterling
@amy · 48,732 edits · 7 day streak
The success state from EyeWire II Brain Quest: a toast and a confetti burst fired together. The card announces through a live region, dismisses on a timer that pauses while you point at it or tap it, and the burst respects reduced motion.
Each card sets one property, --holotint, and that single value
colours both the corner glow and the shadow it pools as it lifts. Point at one,
or tap it, and it comes up.
cyan
The tint reaches the shadow as well as the overlay. Tint only one and it collapses into a coloured smudge.
violet
Everything the pointer gets, a keyboard and a finger get too. The card lifts on focus-within and on a tap.
warm
A cool field with a single warm card in it. Two warm accents and the grid stops reading as an instrument.
A toolbar of icon buttons with rest, hover, focus, pressed and selected
states. Real buttons, inline SVG, no !important. The third is a
toggle and reports with aria-pressed.
One label, one number, one line of context. Say something true, and the ornament stops being ornament.
this one cell receives
165
mossy fiber synapses, from only 6 fibers. A single terminal makes dozens of contacts on one thorn.
A callout that anchors to a target, flips to the side that fits, clamps into the viewport, then slides its beak to keep pointing. Escape dismisses, the arrows step, and the page scrolls the whole time.
An arc of light runs the boundary once, struck from wherever your pointer crossed or your finger landed, then breaks into particles. Every value in the HUD is read off the media element at runtime.
The same treatment over video, plus a play affordance that hides on play and returns on pause. The native controls stay for scrubbing.
The whole interaction from EyeWire II's Scout tag mode, ported from
TagModePanel.vue and holo_trace.ts in the
eyewire-ii-community branch of ng-extend. This one is a round trip: the
panel began by borrowing this library's materialize and swarm, then grew a
light choreography of its own in production, and that choreography now
comes home. Pick a type and click the data after arming (or hold
T): a spark answers at the click and the point waits as a pin.
Submit sends particle streams flowing to the box's midpoints, where
they charge and light the border from both points as the success box
arrives. Click the success box and one bright lap sends it off while the
beam draws the form back. The collapse is the oddly satisfying one:
▾ races the zip light upward, masking the box away beneath it,
and ▴ draws it back with the beam as the reveal mask. Closing
zips the panel away entirely; reopening flings a burst that coalesces onto
the arriving border. Inputs are inert, nothing is submitted.
scout 0
EyeWire II's welcome: the app arrives behind a dark veil that melts away
on a cosine ease while calcium-imaging sparkles bloom and dissolve, so the
scene is revealed through the particles instead of being covered by them.
Ported from the sparkle mode of ConfettiCelebration.vue, on
its shipped one-second "moment" timing.
The tutorial's arriving title from TutorialStep.vue: the
card blurs in, then the title lands letter by letter, each glyph
overshooting two pixels before settling. Two shipped rhythms: a modal
card paces letters at sixty milliseconds, a pointer callout compresses to
fifteen capped at one-eighty so short hints do not dawdle.
The notification detail from NotificationFeedPanel.vue:
the panel materializes from blur and overbrightness on the shared
entrance curve, and a scanline sweeps its top edge on a 3.4 second lap,
the holographic tell. The scan pauses while the card is off screen.
The Weekly Recap's arrival: the report materializes through the three
stage curve, then its sections roll in top to bottom on staggered
two-hundred millisecond entrances, so the summary reads as assembling
rather than popping whole. From WeeklyRecapPanel.vue and the
profile panel's section stagger.
The trophy room's featured award from UserProfilePanel.vue:
five counter rotating rings, twelve orbit dots on two radii already mid
flight from the first frame, a breathing aura, and the award floating on a
slow alternate. Ambient by design, a trophy room is a place you linger,
and it pauses entirely off screen.
THE ASTROLABE
found a cell nobody had opened
Two small honest pieces. The streak readout flickers its flame on a two second cycle while the count's amber glow breathes on three, deliberately out of phase. The toast's two pixel countdown bar drains its five seconds linearly, so the auto dismiss is visible instead of a surprise; the four type tints are as shipped.
From a connectome pipeline, the ALIGN stage carried whole. The registration arrow and the registered volume were cut out of this card, and on their own neither says much; together they say the thing. On the left the raw serial sections, eight sheets of real EM sheared apart by that app's own disorder formula so no two agree. In the middle the arrow. On the right the same tissue as one continuous cuboid, with the mint ping marking a coordinate inside it.
Drag the confidence and the sheets converge. They never land perfectly, and that is the claim: raw sections do not stack on their own, which is why registration exists, and the cuboid on the right is the output rather than the input. The floor of 0.42 on the scatter is the site's own value.
From human-brain: holo-timeline.js, the layer that
replaced that site's scattered setTimeout chains. Sequences are authored
in one place, shaped like the seek and tween core of GSAP with no
dependency. Its two rules travel with it: reduced motion collapses a
sequence to its final state in one step, and nothing renders by itself,
the caller owns the tick. The demo below is one authored sequence: the
bar fills while the glow crossfades, a marker fires the lock label, a
beat passes, and the panel settles.
registration locked, streaming
From BE THE FLY, carried whole: the neural interface panel that docks on the right of the play field. This one is a round trip, because that game vendored this library, so its HUD is already written against these tokens and the port reads them natively; the game's own note on its objective bracket calls it "the scifi-ui idiom used elsewhere on the page". The lit objective runs its shipped sweep, the cell identity carries its type chip, its measured count and the gold pip that marks cells from a dataset other than BANC, and inside the stage the real EPG renders relight under the reticle while the drawn-light compass reads the same heading the renders do. Hold A or D, or the arrow keys, or the on screen labels, to turn.
EPG compass neurons tile the ellipsoid body, and a bump of activity moves around that ring as the fly turns, holding its heading.
Also from BE THE FLY: the hologram tank's layer system. The whole cell waits dim and desaturated as context; begin an action and its layer ignites over it, saturating up from darkness with a drop shadow mixed from the action's own accent. Both layers share one transform, so they never drift out of register.
The fly's own heading dial, drawn with the game's own renders. In BE THE FLY the compass is the EPG ring of the ellipsoid body: the base render sits dimmed while one of sixteen sector renders relights over it as the heading sweeps, a new compass neuron waking up, and the reticle snaps after the turn on its shipped 80ms transition. The readout carries the game's format, cardinal and degrees over the EPG index. Hold the buttons, or A and D like the game, with the pointer over the stage.
The Brain Quest from EyeWire II, carried with its panel, because the
panel is where the sequence happens. Its toolbar icon is defined in
toolbar-icons.ts as { id: 'quest', label: 'Brain
Quest' } and currently sits in RETIRED_TOOLBAR_ICON_IDS,
so the board is switched off in the live app. This is what it does when it
runs: three neurons a day, each pip flipping from its number to a green
check as its cell completes, the progress rail advancing behind them. Work
through all three and the whole sequence fires at once, the way the game
fires it: the celebration card arriving with its breathing gold border,
twelve particles rising in three tints on quarter second staggers and a
pulsing gold star, while the watcher in AchievementToast.vue
raises the quest toast and the rainbow confetti at intensity two. The
board breathes cyan on its own four second cycle throughout.
<link rel="stylesheet" href="hologram.css">
<nav class="holorail" data-holorail="h2"></nav>
<div class="holobar" data-steps="10" data-step="8"></div>
<section class="holoboot holosweep"> ... </section>
<figure class="holocard"><img src="render.jpg" alt=""></figure>
<figure data-hud="optional measured value">
<div class="holoframe">
<canvas class="trace"></canvas>
<img src="render.jpg" alt="">
</div>
</figure>
<script src="hologram.js"></script>
<script src="hologram-tap.js"></script>
Put the canvas.trace before the media. Everything decorative
is created at runtime. The second script is what makes every hover treatment
reachable by tap, and it belongs on any page that loads any part of this
library. Read README.md for the reasoning, the
tunables, and the compositing traps that cost real time.
This card and the toast are the same panel underneath, pulled out once as .holopanel instead of copied a fourth time.
Press this after the tour for a toast and a confetti burst together, the way Brain Quest fires them.
Real buttons with rest, hover, pressed and selected states, and no !important anywhere in the file.
