PROJECT SIGNAL

Effects Library.

Design forensics on the GPT-6 Astra launch page, rebuilt as a reusable motion and interaction kit for Australia Post work. Harvested 23 September 2026.

SCROLL

How this was harvested

I opened the reference page live, at 1440 by 900 and again at 375 by 812, and worked through it the way a visitor would. I scrolled it in small steps, dragged the interactive shapes, clicked through the chart tabs and paged the side by side viewers. Then I read its computed styles, keyframes and animation timings from the console.

Any number in this document (a duration, a curve, a pixel offset) was read from the live page. Where the build method could not be confirmed, the text says Inferred. Where I watched it happen or read it from the page's own CSS, it says Observed. Nothing here is their code, copy or artwork. Every demo and every line of code on this page is new.

How to use it later. Every effect in chapter 09 has a number, and chapter 10 lists them all on one page. In a future build, say something like "use Effects 01, 06, 20 and 25 from the Signal Effects Library" and hand this file back.

This page is built from the library it describes. The field behind these cards is Effect 07. The opening was Effects 01 to 04 and 27. The gaps between chapters where the particles form a shape are Effect 06, and you can drag them.

What the page is made of

One long article, about 32,700px tall at desktop width. It opens with a cinematic sequence, settles into a narrow reading column, and twice hands the whole screen back to the background.

Composition

A single column of text runs the length of the page. It is interrupted by wider media, chart panels, two paged viewers and two empty interludes where nothing but the background is on screen. Benchmark tables and footnotes close it out.

Art direction

Pure black page, near-white type (#fafafa), and a field of soft points of light behind everything. Almost all colour comes from the particles, which mix warm white, pale blue and a little amber, plus a dark blue-grey vignette (#23435F at 55%). Charts use one saturated blue for the series that matters.

Hierarchy

The opening has almost no words: two short labels pinned to the far left and right edges. The first real headline (48px, weight 500) only arrives after the opening sequence. Section heads are 30px, also weight 500. Body copy is 17px on a 28px line.

Typography

One sans family throughout. Headings are medium weight, never bold, with tracking pulled in (about -0.03em at 48px, -0.01em at 30px). Captions under charts are set smaller and in italic.

Density and space

The text column sits in roughly 8 of 12 grid columns, around 620px wide (approximate). Chapter gaps are generous, 80 to 120px. Density peaks inside the chart panels and drops to nothing at the interludes, so the page breathes in a clear rhythm.

Grid

12 columns with 8px gutters on phones and 16px on larger screens. Media breaks out of the text column to 10 or 12 columns. The paged viewers span the full container.

Panels

Chart panels have a hairline border, rounded corners and no fill, so the field shows through faintly. Quotes sit on a slightly lighter slab. Footnotes sit in a rounded block with a faint lighter background.

Depth

Created almost entirely by light: particle size, brightness and twinkle. There are no drop shadows on content. Text over the busy opening gets a soft dark text shadow so it stays legible.

Media

One autoplaying video near the top, with a thin progress ring around its pause control. A pair of "reference" and "output" viewers you can page through. Nine data tables near the end that scroll sideways on small screens.

Navigation

The standard site header, transparent over the opening and dark once content passes beneath it. No in-page chapter navigation is visible on this layout.

The techniques, and why they work

Fourteen techniques do most of the work. The first six carry the "wow". The rest are the quieter craft that makes the page feel expensive.

Scroll-scrubbed particle formation

SpecialistWebGL or Canvas

Where. The opening screen.

What happens. A few thousand soft points of light start as a sparse star field. As you scroll, they pull inward into a dense cluster, then wind themselves into a large ordered form. The screen does not scroll away while this happens; your scroll is spent on the transformation. Scroll back up and it unwinds exactly.

Why it works. It turns the first scroll into a reward. It says "many parts becoming one thing" without a single word. It also gives the visitor control, and control makes spectacle feel personal rather than performed at you.

Reinterpretation. For Signal, each point is a message. Scattered noise gathers into a clear shape, which is the project's argument in one gesture. Canvas 2D handles 2,000 points comfortably, so no WebGL is needed.

Observed formation changes tied to scroll position, a WebGL2 canvas fixed behind the article. Inferred positions blended between precomputed target sets.

Edge-anchored split title

CSS + light JSper-letter spans

Where. The opening screen, over the particles.

What happens. The product name is split into two words and pinned to opposite edges of the screen, vertically centred, inset by clamp(1.25rem, 4vw, 3.5rem). Each letter slides in 44px from the outside over 1s, starting 0.85s after load, 100ms apart, innermost letter first. When the formation grows between them, the words fade back to a ghost and return once it settles.

Why it works. The words frame an empty centre, so the space between them becomes the stage. Letters arriving from the inside out push the eye toward the middle. Fading the labels stops type fighting the image.

Reinterpretation. Name a before and an after, one on each edge ("Noise" and "Signal"). The formation that grows between them is then the change itself.

Observed letter delays 0.85s to 1.25s, shift 44px, curve cubic-bezier(.22,1,.36,1), fixed layer above the canvas.

Ambient vignette bloom

Simple CSSone keyframe

What happens. A radial gradient, clear in the centre and tinted at the corners, fades in over 5.5 seconds, linear, to 55% opacity.

Why it works. It is slower than you consciously watch, so you never see it arrive. The page just seems to get deeper while you look at it.

Reinterpretation. Tint it with the client colour at very low strength (here, a red-ink #2a0a12) so the brand is felt before it is seen.

Observed 5.5s, linear, target opacity 0.55.

Deferred headline

CSS + light JSscroll variable

What happens. The first real headline does not appear on load. It rises into place as the opening sequence finishes, with a 120px parallax offset, and sits over the settled formation.

Why it works. The visual lands first and the words second. By the time the headline appears it has an image to sit on, and the visitor has already been rewarded once.

Reinterpretation. Hold the brand header (eyebrow, title, subtitle) back until the formation completes, then bring all three in as one group.

Observed headline appears after the sequence, parallax variable of 120px on the title.

Persistent stage

Moderate JSfixed canvas

What happens. One canvas is fixed behind the entire article. Every section scrolls over it. Under the reading column the field keeps drifting, dim and sparse.

Why it works. Continuity. The page feels like one place rather than a stack of panels, and there are no hard background changes to cut between.

Reinterpretation. Keep the field, but put reading content on white cards over it (your rule for reading slides). The field then lives in the margins and in the gaps between cards.

Observed canvas in a fixed, full-viewport layer at z 0; content at z 10.

Interlude cues

Specialistshape sampling

What happens. Two empty blocks sit in the content flow, each 80% of the viewport tall, each holding a hidden outline drawing. When one reaches the screen, the background particles assemble into that outline. As you move on, they scatter back into the field. The blocks carry a grab cursor, and vertical touch scrolling still works across them.

Why it works. They give the long page a rhythm. Each return of the visual reads as a chapter break without needing a heading, and the empty space rests the eye before the next dense section.

Reinterpretation. One formation per chapter, drawn from your own outlines: an envelope, a parcel, broadcast rings, an arrow, a word.

Observed in-flow blocks with hidden SVG targets, grab cursor, touch-action: pan-y. Inferred drag rotates the formation (my synthetic drag did not visibly turn it).

Countdown tabs

CSS + light JS

What happens. Tabs above each chart set advance on their own. The selected tab fills with a faint bar that grows left to right over 6 seconds, but the first third of that time holds empty. Colour and background changes take 300ms on a symmetrical curve.

Why it works. It tells you the panel is about to change and exactly when, so the change never surprises you. The held first third gives you time to read before the timer starts.

Observed 6s linear, 0 to 33.3% held, cubic-bezier(.6,0,.4,1) 300ms, no autoplay under reduced motion.

Quiet chart panels

Moderate JSSVG charts

What happens. Charts sit in hairline panels with no fill. The series that matters is the only saturated colour, drawn as a joined line with distinctive markers. Comparisons are muted and use different marker shapes. A short caption sits underneath.

Why it works. One colour carries the story. Marker shapes let people who cannot separate colours still read the chart.

Ring-timer media control

CSS + light JS

What happens. The video autoplays muted. Its pause control is circled by a thin arc that fills as the video plays.

Why it works. One control shows state, progress and the way to stop it, which means fewer parts on screen.

Paired evidence viewers

Moderate JS

What happens. Two document viewers sit side by side, labelled as the input and the result, each with its own page count, arrows and an expand control.

Why it works. The page shows its evidence and lets you check it yourself, rather than asking you to believe a claim.

Replay and still fallback

Simple

What happens. A small, low-contrast replay button in the corner reruns the opening. With reduced motion switched on, the canvas is swapped for pre-rendered stills of the formed shapes.

Why it works. Replay invites a second look without shouting. The reduced version is still beautiful rather than blank, so accessibility costs nothing in quality.

Header, clear to solid

Simple CSS

What happens. The header is transparent over the opening and dark once content scrolls under it.

Why it works. The opening gets the whole screen; the reading chapters get a stable anchor.

Observed the change. Inferred a background and blur transition, from the header's class names.

Mobile viewport variable

Simple CSS

What happens. The opening height uses small-viewport units and a measured height variable, so it does not jump when a phone's address bar hides. On phones the formation is scaled up to fill the screen and the labels move in to 1rem from the edges, sitting over it.

Why it works. The single most common "cheap site" tell on phones is a hero that lurches as you start to scroll. This avoids it.

House motion vocabulary

Simple CSSreference only

What happens. The site's shared stylesheet (not used on this page) shows the family of moves the brand reaches for: cards rise 16 to 21px while scaling from 0.975 to 1; outlines are "written" with clip-path reveals stepped at 55ms; a light band sweeps across headlines over about 1.5s; floating objects loop on a sine curve.

Why it matters. Small distances, long decelerating curves, nothing bouncy. That consistency is what makes separate effects feel like one product.

Motion design language

Ten rules describe how everything on the page moves. They transfer to any build.

Float, never snap. Every entrance decelerates on a long tail. Nothing bounces on this page. The one overshoot curve in this kit is for a button returning after a press.
Short distances, long durations. Things travel 6px, 16px, 44px, and take 0.7 to 1 second to do it. The eye reads intent, not travel.
One loud thing at a time. The particle field is the only dramatic motion. All interface motion is quiet: 150 to 300ms colour and opacity changes.
Scroll is spent on meaning. Scroll becomes animation only in the opening and the interludes. In reading chapters, scroll just scrolls.
Many small parts, each on its own clock. Particles and letters move individually with varied delays, which reads as natural. Panels and text blocks move as single units.
Enter by rising, leave by fading. Exits are quieter than entrances and happen in place.
Depth comes from light. Size, brightness and twinkle make depth. Shadows are not used on content.
Text is still once it has arrived. Nothing you are reading moves.
Anything timed shows its timer. Autoplay tabs fill a bar; video shows a progress ring.
Every motion has a designed still. Reduced motion gets a finished frame, not an empty box.

Motion tokens

TOKEN	VALUE	USE
Quint out	cubic-bezier(.22,1,.36,1)	Reveals, labels, underlines. The house curve.
Expo out	cubic-bezier(.16,1,.3,1)	Word and card entrances. Faster start, longer tail.
State	cubic-bezier(.6,0,.4,1)	Tab and colour state changes. Deliberate, symmetrical.
UI	cubic-bezier(.4,0,.2,1)	Hovers and small controls.
Sine loop	cubic-bezier(.45,.05,.55,.95)	Ambient loops, floats, breathing.
Transfer	cubic-bezier(.65,0,.35,1)	Wipes, line draws, things crossing space.
Release	cubic-bezier(.34,1.56,.64,1)	Button returning after press only. Kit addition.
Micro	150ms	Hover colour, replay button.
UI	200 to 300ms	Tabs, toggles, fades out.
Enter	720ms to 1s	Words, cards, letters.
Ambient	5.5s	Vignette, background moods.
Dwell	6s, first 2s held	Autoplay panels.
Stagger	100ms / 45ms / 60ms	Letters / words / cards.
Travel	6px / 16px / 44px	Words / cards / edge letters.

Scroll choreography

Most of the page is plain scrolling. The spectacle is rationed into three places, and that restraint is what keeps a 32,000px page from feeling repetitive.

0 to 4%Opening. Held in place by fixed layers while scroll scrubs the formation from field to cluster to form. Labels ghost and return; headline arrives.
4 to 7%Video. Normal scroll. The field is still visible either side of the player.
7 to 14%Introduction and first charts. Normal scroll, reading column over a dim field. Tabs autoplay.
14 to 17%Interlude one. Scroll summons an outline formation; leaving disperses it.
17 to 75%Chapters. Six long chapters of normal scroll: text, charts, paired viewers, quotes. The field drifts underneath.
77 to 80%Interlude two. A second formation, the brand's own mark.
80 to 93%Tables. Nine tables, sideways scroll inside them on narrow screens with a fixed first column.
93 to 100%Footnotes. Solid block. The field is covered and the page goes quiet.

Patterns, and where they appear

Normal scroll

About 90% of the page. Content passes over the fixed field.

Reveal scroll

Barely used here. Entrances happen on load (letters) rather than on viewport entry. Charts arrive static.

Scrubbed scroll

The opening formation and both interludes map scroll position straight to formation progress.

Pinned storytelling

The opening, done with fixed layers rather than a sticky section: the labels and canvas stay, the content scrolls up to meet them.

Sticky media

Not in the classic sense. The fixed field is sticky media for the entire page.

Transformative scroll

Particles scale, rotate and reassemble. No DOM element transforms with scroll apart from the title offset.

Parallax scroll

Two layers: the fixed field (infinite ratio) and a 120px offset on the headline.

Horizontal scroll

Only inside wide tables on small screens, with a sticky first column and fade controls at the overflow edge.

Scene transition

Formation to field, field to formation. No wipes, no colour changes between chapters.

New name: summoned formation

An empty block in the flow that calls the background into a shape while it is on screen. The block itself holds nothing visible.

New name: ambient persistence

A living background that never leaves, reducing its intensity under reading rather than disappearing.

New name: density tide

Background brightness rises in the empty moments and falls under dense content, so the page inhales and exhales.

The details I probably noticed without knowing why

Small decisions, mostly invisible on their own, that add up to "this feels expensive".

Letters arrive from the inside out.
In the split title, the letters nearest the centre move first and the outer ones follow 100ms apart. Your eye gets pulled toward the empty middle, where the visual is about to happen.
The labels get out of the way.
When the formation grows behind the words, they fade to a ghost, then come back. Type and image never compete for the same moment.
The background gets darker while you watch.
The vignette takes 5.5 seconds to arrive. That is slower than you can notice, so the page just feels deeper after a few seconds.
The particles are uneven on purpose.
Most are pinpricks; a few are larger and warmer. A handful of bright ones with many faint ones is how real light behaves, so it reads as natural instead of generated.
Each point twinkles on its own clock.
No two particles pulse together. Synchronised twinkling looks mechanical within a second.
The shapes are outlines, not fills.
The formations trace an edge and leave the middle empty. Your brain completes the shape, which is more satisfying than being shown all of it.
The headline is not bold.
Large type at medium weight with tightened letter spacing reads as confident rather than loud.
White is not white.
Text is #fafafa on black. Slightly off-white stops the text buzzing against the dark.
The autoplay timer waits before it starts.
For the first 2 of its 6 seconds the progress bar stays empty. You get time to read before the "this will change" pressure begins.
State changes are slow on purpose.
Tab colour changes take 300ms on an even curve. Fast enough to feel responsive, slow enough to feel considered.
The replay button barely exists.
15% white, brightening to 25% on hover over 150ms. Available if you want it, never competing.
Charts use shape as well as colour.
The highlighted series has its own marker shape, so it still stands out in greyscale or for colour-blind readers.
Phones never get stuck.
The draggable interludes still let a thumb scroll vertically. Only sideways drags rotate the shape.
The opening does not jump on phones.
Its height tracks the visible viewport, so it does not lurch when the address bar slides away.
Reduced motion still gets the picture.
People who switch animation off see a still image of the formed shape, not a blank space.

What to borrow, and what to leave alone

Principles worth borrowing

Scroll-scrubbed assembly of many small parts into one form.
Edge-split framing that leaves the centre of the screen for the visual.
A fixed, living background that dims under reading and swells between chapters.
Summoned formations in empty blocks, used as chapter breaks.
Long decelerating curves over short distances.
Autoplay that shows its timer and holds before it starts.
Controls that double as progress indicators.
Side by side evidence the visitor can page through.
Depth from light rather than shadow.
Designed stills for reduced motion.

Do not reproduce

The OpenAI wordmark, the knot mark, or any particle rendering of either.
The cursor icon as a formation motif.
The spiral galaxy as the opening form. It is their signature execution.
The "GPT" and "Astra" split, or any product name pairing that echoes it.
Their star colour mix and blue-grey vignette.
Written copy, benchmark content, testimonials, video or images.
Their chart styling one for one, including star markers.
The OpenAI Sans typeface.
The exact page sequence of opening, video, introduction, charts.
Any of their source code. Everything in this file is written fresh.

Their execution

Abstracted one level up

Stars become a galaxy

Noise resolves into an orderly form built from the same parts that were chaos a moment ago.

Particles trace the brand mark

An interlude where the background draws an outline that carries this chapter's idea.

GPT on the left, Astra on the right

Two short words on opposite edges that name the tension the visual resolves.

Blue-grey vignette on black

A barely-there client tint at the corners of a dark stage.

Creative direction for the Pilot Summary and Communication Toolkit

Same level of craft, unmistakably ours. The idea to carry through: every safety message starts as noise, and the toolkit is how it becomes a signal someone acts on.

Visual direction

Ink and paper. A deep ink stage (#0c0d11) with a red-ink vignette carries the cinematic moments. Reading happens on white paper cards laid over it. Particles are warm white, AusPost red #e4002b, a soft pink and a cool grey, so the field carries the brand colour without shouting it. Square corners everywhere.

Layout

One reading column, about 640px, inside cards up to 980px wide. Media and demos break out to the card edge. Big gaps between cards where the field shows through. No sidebars.

Motion

Follow chapter 04. The field is the only loud motion. Cards rise 16px into place. Letters and words arrive on long tails. Nothing bounces except a pressed button coming back.

Interaction

Scroll drives the opening and the interludes. Formations can be dragged to turn. Toolkit formats sit in countdown tabs you can stop by clicking. Before and after messages page side by side.

Typography

Manrope for everything, JetBrains Mono for numbers and effect references. Headings at 600 with tight tracking, body 17px on a 1.65 line. The brand header stays: PROJECT SIGNAL eyebrow, title with a red full stop, subtitle.

Space

Let the interludes be empty. A full screen with nothing but the formation is the pause that makes the next chapter land.

Media

Posters, alerts and toolbox talks shown as live A4 pages in paired viewers. Charts drawn in SVG, drawing on as they enter. No stock imagery.

Transitions

Card, then field, then card. Between major chapters the field forms a shape and disperses. At the end the field hands over to a solid footer.

Navigation

A thin header, clear over the opening, solid after. Chapter links with a red underline that tracks your position. On phones, the brand and the motion toggle only.

Responsive

Fewer particles on smaller screens (800 on phones, 2,200 on desktop). Shorter pinned opening on phones. Shapes scale to the shorter screen edge. Every interaction works by touch.

Proposed storytelling structure

Opening"Noise" and "Signal" on the edges. Scroll gathers the field into broadcast rings. Brand header arrives.01 02 03 04 27
The pilotWhat we tested, where, with whom. Paper card, reveal rise.09 20
InterludeThe field forms an envelope. A message.06 30
The toolkitPoster, toolbox talk, safety alert, decision tree in countdown tabs. Each with a before and after pair.25 16
SIGNAL checkSix principles. A pinned list where the field changes shape for each principle as its text scrolls past.05 35
What we measuredCharts that draw on, figures that count up.32 33 34
What people saidQuote slabs, one per screen.19
InterludeThe field forms an arrow. Action.06
Next stepsShort list, one action per line. The field spells SIGNAL, then hands over to the footer.36 31

Shape ideas for the six SIGNAL formations, drawn from the checks in the Pilot Communication Tool: a single bright bar for the headline check, a tangle straightening into a line for plain language, a map pin for audience and site, a signpost for findability, an arrow for action, a loop for leader repetition. To agree with you before building.

Effects library

Thirty-six effects in eleven groups. Each has a number that stays fixed. Variations sit under the strongest ones. Where there is a dark box, it is a live demo.

Hero effects

Constellation Assembly

CATEGORYHero, Storytelling

TRIGGERScroll progress

INTENSITYHero

COMPLEXITYHigh

BUILDCanvas 2D, rAF

Behaviour. Each particle holds a position in several formations (field, cluster, rings, an outline). Scroll progress picks two neighbouring formations and a blend between them. Every particle has its own start delay (0 to 35% of the blend) and an ease-in-out curve, so the shape assembles like a flock rather than a slide.

Visual result. Points of light drift together and a shape resolves out of the noise, with larger, brighter points reading as nearer.

Best use. Openings and chapter breaks where one idea deserves the whole screen.

Reduced motion. Draw the finished formation once, no blend, no twinkle.

This lab also demonstrates 05, 21, 22, 23, 35 and 36. Drag the shape to turn it.

Variations

Assemble to type. The particles form the chapter title itself, hold, then the real text fades in exactly on top and the particles disperse.
Converge to a point, then bloom. Field collapses to a single bright point at 50% progress, then expands outward into the shape. Stronger sense of "moment".
Two populations. Grey particles stay as drifting noise while only the red ones assemble, so the signal separates from the noise instead of replacing it.

Edge-Split Title

CATEGORYHero, Typography

TRIGGERPage load

INTENSITYHero

COMPLEXITYLow

BUILDCSS keyframes

Behaviour. Letters start 44px outside their final place at opacity 0 and travel inward over 1s on quint out. Delays start at 0.85s and step 100ms per letter, beginning from the letter nearest the centre. A --copy variable lets scroll fade the words to 16% while a visual passes behind.

Visual result. The words seem to arrive from off-screen and settle at the edges, leaving the middle open.

Best use. Before and after pairs, two-word titles, any opening with a central visual.

Reduced motion. Letters shown in place.

Variations

Converging split. After arriving, both words drift slowly toward each other with scroll and lock together as one line when the section ends.
Vertical split. One word top left, one bottom right, on a diagonal, with the visual in the gap. Suits portrait phones.
Question and answer. Left word is present from load; the right word only arrives once the visual completes, so the answer is earned.

Ambient Vignette Bloom

CATEGORYBackground

TRIGGERPage load

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS keyframes

Behaviour. A fixed layer with a radial gradient (clear centre, tint at the corners, stepped at 28%, 55%, 78%) animates from opacity 0 to 0.6 over 5.5s, linear.

Visual result. The edges of the screen slowly warm and darken. Visible on this page now.

Best use. Any dark stage. Pair with 07.

Reduced motion. Start at the final opacity.

Deferred Headline

CATEGORYHero, Typography

TRIGGERScroll progress

INTENSITYMedium

COMPLEXITYLow

BUILDCSS variables + JS

Behaviour. Between 70% and 88% of the opening's scroll range, the header's opacity goes 0 to 1 and it rises from 40px below centre, on a smoothstep curve. The edge labels fade out over the same range.

Visual result. The formation settles and the title arrives on top of it, as if it had been waiting.

Best use. Any opening where the visual should land before the words.

Reduced motion. Header visible from the start.

Variations

Title from particles. Combine with 36: the particles form the title, then the real text replaces them.
Headline with a held breath. The eyebrow appears first, the title 300ms later, the subtitle 300ms after that.

Scroll effects

Pinned Formation Sequence

CATEGORYScroll, Storytelling

TRIGGERScroll progress

INTENSITYHero

COMPLEXITYHigh

BUILDSticky + canvas

Behaviour. A tall section (about 340vh) contains a sticky, full-height child. Scroll progress through the section is split into stops, each naming a formation and a brightness. The field blends between neighbouring stops.

Visual result. The page stops moving and the picture changes instead. The opening of this page is one.

Best use. A sequence of three to six ideas, such as the six SIGNAL principles.

Reduced motion. Section is one screen tall; the final formation is shown.

Variations

Text-led steps. Text blocks scroll normally on the left; the formation on the right changes when each block crosses the middle of the screen.
Counter in the corner. A small "2 of 6" readout updates with each stop so the visitor knows how much is left.

Summoned Formation

CATEGORYScroll, Transition

TRIGGERScroll position

INTENSITYHero

COMPLEXITYMedium

BUILDCanvas + data attributes

Behaviour. A block of about 110vh carries data-shape. When its centre is within 0.9 viewport heights of the screen centre, the field blends from drift to that shape, fully formed for the middle 0.3 of a viewport, then disperses. The block takes pointer drags to turn the shape.

Visual result. Between chapters the screen empties and a shape draws itself out of the stars. You have passed four on this page.

Best use. Chapter breaks in long documents.

Reduced motion. Shorter block, the shape shown still.

Variations

Labelled formation. A single word fades in under the shape at full formation and out before it disperses.
Morph chain. Two cues back to back, so one shape morphs directly into the next without returning to noise.
Card that makes way. The card before the cue scales to 0.96 and dims slightly as the formation takes over, as if it has stepped back.

Persistent Stage

CATEGORYBackground, Depth

TRIGGERAlways on

INTENSITYSubtle

COMPLEXITYMedium

BUILDFixed canvas

Behaviour. Canvas fixed at inset: 0, z-index: 0, pointer events off. Content above at a higher z-index. Rendering pauses when the tab is hidden and when motion is paused.

Visual result. The page feels like one continuous place.

Best use. Long reports, pilot summaries, landing pages.

Reduced motion. Render a still frame.

Variations

Paper day, ink night. The stage turns from ink to a pale warm grey for appendix chapters, with particles darkening to match.
Frosted margin. Cards get a 12px blurred halo so the field softens right at their edges.

Density Tide

CATEGORYBackground, Scroll

TRIGGERScroll position

INTENSITYSubtle

COMPLEXITYLow

BUILDStop list in JS

Behaviour. Each stop carries a brightness (1.0 in the opening and interludes, 0.3 under cards). The stage multiplies particle alpha by the blended value.

Visual result. The field swells between cards and recedes as the next one arrives.

Best use. Anywhere 07 is used.

Reveal Rise

CATEGORYEntrance

TRIGGERViewport entry

INTENSITYSubtle

COMPLEXITYLow

BUILDIntersectionObserver

Behaviour. Opacity 0 to 1, translateY 16px to 0, scale 0.985 to 1, over 720ms on expo out. Items entering together are staggered by 60ms. Runs once.

Visual result. Content arrives settled rather than popping on. Every block on this page uses it.

Best use. Paragraph groups, cards, list rows.

Reduced motion. Visible immediately.

Scroll Title Offset

CATEGORYScroll, Depth

TRIGGERScroll progress

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS variable

Behaviour. A translate driven by a variable, from +120px to 0 across the section. Only one element per section.

Visual result. The title seems to sit on a nearer plane than the text around it.

Best use. Section titles over a background.

Reduced motion. No offset.

Text and typography

Word Lift

CATEGORYTypography

TRIGGERViewport entry

INTENSITYMedium

COMPLEXITYLow

BUILDSplit spans + CSS

Behaviour. Text split into word spans. Each goes from opacity 0 and 6px down to rest over 720ms on expo out, delayed 45ms more than the one before.

Visual result. The sentence types itself in, softly.

Best use. One key statement per chapter. Not body copy.

Reduced motion. Whole line shown.

A message only counts once someone does something with it.

Ink Wipe

CATEGORYTypography, Reveal

TRIGGERViewport entry

INTENSITYMedium

COMPLEXITYLow

BUILDCSS clip-path

Behaviour. clip-path: inset() animates from fully clipped on the right to open over 1.2s on the transfer curve. A 2px red line travels with the edge and fades at the end.

Visual result. The words appear to be written as you watch.

Best use. Chapter titles, a quote's first line.

Reduced motion. Shown in full, no caret.

Stop. Check. Then act.

Light Sweep

CATEGORYTypography

TRIGGERViewport entry

INTENSITYMedium

COMPLEXITYLow

BUILDbackground-clip: text

Behaviour. Text filled with a wide gradient (dim, bright band with a pink core, dim) clipped to the letters. Background position runs across once over 1.6s while the text rises 0.2em. Then it switches to solid white.

Visual result. A glint crosses the headline and it comes to rest.

Best use. One hero or closing line. Once per page.

Reduced motion. Solid text.

Pilot summary

Quiet Weight Type System

CATEGORYTypography

TRIGGERStatic

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS

Behaviour. Headings 600 (never 700+) with tracking of -0.03 to -0.04em. Body 17px, line 1.65, measure 640px. Numbers and references in a mono face. Off-white on dark (#fafafa), near-black on white (#16181d).

Visual result. Large type that reads calm and confident. This page is set in it.

Best use. Everything.

Image and video

Frame Timer Control

CATEGORYMedia, Micro-interaction

TRIGGERMedia time, click

INTENSITYSubtle

COMPLEXITYLow

BUILDSVG pathLength

Behaviour. An SVG rect with pathLength="1" around the button. Its dash offset is set from playback progress each frame. Click toggles play and pause; the frame stops with it. This is the square reinterpretation of a ring timer.

Visual result. A thin line walks around the button while the loop plays.

Best use. Autoplaying loops, slideshows, timed demos.

Reduced motion. Media starts paused; the frame shows current position only.

00:00 / 00:12

Variations

Edge progress. The frame runs around the whole video instead of the button.
Chapter ticks. Small notches on the frame mark chapter points; clicking near one jumps there.

Twin Evidence Viewer

CATEGORYMedia, Storytelling

TRIGGERClick, keys

INTENSITYMedium

COMPLEXITYMedium

BUILDVanilla JS

Behaviour. Each viewer holds pages. Next and previous slide the current page out 24px left and fade it, and bring the new one in from 24px right, over 420ms quint out. A "page together" option keeps both in step.

Visual result. Two documents you can compare yourself.

Best use. Old message against the rewritten one; template against output.

Reduced motion. Pages swap without travel.

Page together

Before

1 / 3

After

1 / 3

Variations

Stacked on phones. Viewers stack; a sticky "Before" and "After" switch swaps which one is on top.
Hold to compare. A single viewer shows "After"; pressing and holding shows "Before" in place.
Annotated after. Small numbered markers on the "After" page line up with SIGNAL principles in a list beside it.

Column Breakout

CATEGORYLayout, Media

TRIGGERStatic

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS grid

Behaviour. Text sits in 8 of 12 columns; figures span 10 or 12. Every demo box in this library breaks out of the 640px text measure to the card width.

Visual result. A rhythm of narrow reading and wide showing.

Best use. Any document with figures.

Cards and containers

Veil Panel

CATEGORYCard

TRIGGERStatic

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS

Behaviour. White at 4% with a 1px border at 14% white. The frosted version adds a dark 55% fill and an 8px backdrop blur.

Visual result. Panels that feel part of the stage rather than stuck on top of it.

Best use. Charts and data on dark stages. Not for long reading.

Veil

The field stays visible through the panel.

Frosted veil

For panels over bright or busy areas.

Quote Slab

CATEGORYCard, Typography

TRIGGERViewport entry

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS + 09

Behaviour. A slab a step lighter than its surroundings, quote at 22 to 26px weight 500, attribution at 13px muted. Arrives with 09; first line can use 12.

Visual result. A voice that stands apart from the analysis.

Best use. De-identified participant quotes.

Paper Card over Field

CATEGORYCard, Layout

TRIGGERStatic

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS

Behaviour. White cards up to 980px, square corners, a soft deep shadow (0 30px 80px at 35% black) to lift them off the dark. Gaps of 18 to 34vh between them.

Visual result. This page. Readable like a document, cinematic around the edges.

Best use. Every reading chapter in Signal builds.

Background and atmosphere

Twinkle Field

CATEGORYBackground

TRIGGERAlways on

INTENSITYSubtle

COMPLEXITYMedium

BUILDCanvas 2D sprites

Behaviour. Sizes skewed small (most tiny, a few large). Colours weighted 62% warm white, 18% red, 10% pink, 10% cool grey. Each has its own twinkle frequency and phase and a slow drift of a fraction of a unit. Drawn from pre-rendered glow sprites with lighter blending.

Visual result. A soft, alive field that reads as light, not dots.

Best use. Behind openings and interludes; dim behind reading.

Reduced motion. No twinkle or drift.

Drag to Orbit

CATEGORYBackground, Interaction

TRIGGERPointer drag

INTENSITYMedium

COMPLEXITYMedium

BUILDPointer events

Behaviour. Horizontal drag adds to a rotation angle about the vertical axis (0.008 radians per pixel). Velocity carries on after release and decays by 6% per frame. Vertical movement is left to the browser so touch scrolling still works.

Visual result. The shape turns and near points grow while far points shrink and dim.

Best use. Interludes and the opening. Try it in the lab under 01 or on any interlude.

Pointer Drift

CATEGORYDepth, Cursor

TRIGGERPointer position

INTENSITYSubtle

COMPLEXITYLow

BUILDrAF easing

Behaviour. Pointer position normalised to -1 to 1, eased toward at 6% per frame, multiplied by each particle's depth. Off on touch devices.

Visual result. Moving the mouse makes the field feel three dimensional.

Best use. Desktop openings.

Navigation and UI

Clear-to-Solid Header

CATEGORYNavigation

TRIGGERScroll position

INTENSITYSubtle

COMPLEXITYLow

BUILDClass toggle

Behaviour. A class switches when the opening ends. Background from 0 to 90% ink, 10px backdrop blur, 8% white hairline, over 400ms. Chapter links show position with a red underline drawn on quint out.

Visual result. The header above this page.

Countdown Tabs

CATEGORYNavigation, Data

TRIGGERTimer, click

INTENSITYMedium

COMPLEXITYLow

BUILDCSS keyframes + JS

Behaviour. 6s dwell per tab. The 2px red line under the active tab holds empty for 2s, then fills left to right. At the end the next tab takes over. Panels fade out and rise 8px in over 300ms. Any click stops autoplay for good. Autoplay only runs while the tabs are on screen.

Visual result. A slow slideshow you can read at your own pace.

Best use. Toolkit formats, chart sets, principles.

Reduced motion. No autoplay; a full line marks the selected tab.

Poster

One headline, one picture, one action. Read from three metres away.

Variations

Chapter timer. The same held-then-fill line runs under a chapter number in the header during a pinned sequence.
Vertical list. Principles listed down the left; the line grows downward beside the active one while its panel shows on the right.

Replay and Pause Controls

CATEGORYUI, Accessibility

TRIGGERClick

INTENSITYSubtle

COMPLEXITYLow

BUILDJS

Behaviour. Replay: 36px square, 12% white, 24% on hover over 150ms; restarts the letter animation and scrolls to the top. Pause: stops the canvas loop and all CSS loops (a class on the root). Required for any motion that runs longer than 5 seconds.

Visual result. See the header and the bottom right of the opening.

Scroll Hint

CATEGORYUI

TRIGGERPage load, scroll

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS + variable

Behaviour. 12px letterspaced label at 55% white, bottom centre. A 1px line draws down and retracts on a 2.4s sine loop. Opacity follows the first 8% of the opening's scroll to zero.

Best use. Any pinned opening, where people otherwise wonder whether the page is broken.

Micro-interactions

Considered State Change

CATEGORYMicro-interaction

TRIGGERHover, select

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS transitions

Behaviour. transition: color 300ms cubic-bezier(.6,0,.4,1) for selection; 150ms UI curve for hover. Underlines draw with scaleX on quint out over 420ms.

Best use. Tabs, nav, toggles. See the lab buttons under 01.

Settle Press

CATEGORYMicro-interaction

TRIGGERHover, press

INTENSITYSubtle

COMPLEXITYLow

BUILDCSS

Behaviour. Press: scale 0.97 over 120ms. Release: back to 1 over 380ms on the release curve (small overshoot). Hover: arrow moves 4px over 260ms.

Visual result. Buttons feel physical.

Section transitions

Formation Dissolve

CATEGORYTransition

TRIGGERScroll position

INTENSITYMedium

COMPLEXITYMedium

BUILDPart of 06

Behaviour. The reverse of assembly: the stop after the formation blends back to drift, and staggered delays mean the edges fray first.

Visual result. The shape comes apart like a flock breaking up rather than fading.

Best use. Anywhere 06 is used. It is the handover to the next card.

Tone Handoff

CATEGORYTransition

TRIGGERScroll position

INTENSITYSubtle

COMPLEXITYLow

BUILDStop list + CSS

Behaviour. A last stop drops field brightness to 0.15 while a solid footer scrolls up over the stage.

Visual result. The experience winds down instead of just ending. See the bottom of this page.

Data and diagrams

One-Colour Story Chart

CATEGORYData

TRIGGERHover

INTENSITYSubtle

COMPLEXITYMedium

BUILDInline SVG

Behaviour. The key series is red with square markers; others are grey with circles or diamonds. Pointer over the plot snaps a dashed crosshair to the nearest point and shows the value.

Visual result. The eye goes straight to the red line.

Best use. Pilot results against baseline.

Rewritten messageOriginal messageNo message

Illustrative data for the demo only.

Draw-On Line

CATEGORYData, Entrance

TRIGGERViewport entry

INTENSITYMedium

COMPLEXITYLow

BUILDSVG pathLength

Behaviour. Each path has pathLength="1" and dash offset 1, transitioning to 0 over 1.4s on the transfer curve, series 150ms apart. Markers scale from 0 with the release curve after their line passes.

Visual result. Shown in the chart above.

Reduced motion. Lines drawn.

Count-Up Figure

CATEGORYData

TRIGGERViewport entry

INTENSITYMedium

COMPLEXITYLow

BUILDrAF

Behaviour. 1.4s, expo out, tabular numerals so the width never jitters. Once only.

Reduced motion. Final number shown.

0Sites (illustrative)

0Found it useful (illustrative)

0Formats

Experimental and high impact

Path Sampler

CATEGORYExperimental

TRIGGERFormation change

INTENSITYHero

COMPLEXITYMedium

BUILDgetPointAtLength

Behaviour. Paths are measured, particles shared out by length, and points taken at even steps with a small jitter. Points are centred and scaled into a unit square. Depth is given a small random spread so turning shows thickness. Envelope, pin and arrow in the lab under 01 are drawn this way.

Best use. Chapter icons. Keep outlines simple: one to three strokes.

Word Constellation

CATEGORYExperimental, Typography

TRIGGERFormation change

INTENSITYHero

COMPLEXITYMedium

BUILDOffscreen canvas

Behaviour. The word is drawn to a hidden canvas, pixels above half alpha are collected on a 3px grid, and particles take random picks from them.

Visual result. Try "Word" in the lab, or scroll to the end of this page.

Best use. One word per document. The closing moment works best.

Master inventory

Reference by number: "Use Effects 01, 06, 20 and 25 from the Signal Effects Library." Full specs for each are in chapter 09.