HelioformArrival, not announcement.One camera, kept in shadow until June 21 — then shown at full scale.Reserve the releaseReveal · June 21Serials 001–250Ships worldwide · Q1
Demo brand · a light-field camera built by a two-person Berlin optics lab

CinematicTier: Premium

Signal Bloom

A dark launch that moves from quiet anticipation to one controlled, luminous reveal.

Feeling
The product is arriving, not merely being announced.
Composition
Edge-weighted hero → full reveal → outcome → evidence → proof → one release action.
Motion
Slow light drift, two-line headline entrance, one product-scale reveal, restrained in-view movement.
Guardrail
Never stack multiple continuous GPU effects or hide the product after the reveal.
Best for
AI product launch · Limited release · Creative technology
Tier
Premium tier. This direction has a hand-built Builder template, so Builder renders its own composition, and it carries an extended build spec: section-by-section requirements, a type scale, an alternate palette and a motion spec.

Capability sources

  • react-bits
  • motion-primitives
  • launch-ui

The prompt works in any AI tool. Build this in Irie hands this direction’s agreement to Builder through a short-lived link, and Builder shows you what it imported before it generates. If that link cannot be created, Builder still opens with the prompt on your clipboard. The agreement is a structured irie.direction.v1 file you can also keep or feed to any tool that reads it.

Premium build spec

What premium means here.

Signal Bloom has a hand-built Builder template, so Builder renders this composition instead of the shared generic one. It also carries the build spec below, which travels inside the downloadable agreement.

  1. Edge-weighted hero

    The product pushed to one edge and cropped by the frame, a two-line headline in the negative space it leaves, the release date or window set in mono, and one action. The object must be partly out of frame.

    Most often goes wrongThe crop is centred, which reads as a product photo with a caption instead of an object about to arrive.

  2. Full reveal

    The same object, uncropped, at the largest scale the viewport allows, with the light that was only implied at the edge now resolved on its surface.

    Most often goes wrongA different photograph appears. The reveal only lands if it is unmistakably the same object, now seen whole.

  3. Outcome

    One sentence naming what changes for the owner, plus a single supporting image or diagram at roughly half the reveal's scale.

    Most often goes wrongA three-column feature grid arrives here and the page silently becomes a template again.

  4. Evidence

    The mechanism: how it does the thing, in the specifics and numbers the brief supplies.

    Most often goes wrongMechanism is replaced by adjectives. If there is no figure, material, or measured behaviour in this section, it has not been written yet.

  5. Proof

    Only what the brief supplies, attributed to its source. If the brief supplies none, the block renders as a labelled empty slot.

    Most often goes wrongThe empty space gets filled with logo walls or counts nobody supplied. Leave it empty instead.

  6. Release action

    One control, the date it applies to, and a plain line saying what happens after it is pressed.

    Most often goes wrongA second competing action (newsletter beside preorder) splits the close and the sequence ends on a shrug.

Type scale

Display
Condensed display at clamp(3.5rem, 8vw, 7.5rem) = 56-120px, line-height 0.92, tracking -0.02em. The headline is two lines and must break where you decide, so set an explicit break rather than letting the viewport choose.
Body
17-19px at line-height 1.65, measure 62-70ch. Cream on near-black needs more leading and a shorter line than the same copy would on paper; at 1.4 the lines smear together on an OLED phone.
Meta
13px mono, uppercase, tracking 0.12em, reserved for release dates and section numbering. Mono earns its place as instrumentation and must never carry a sentence.

Alternate palette — Cold key

  • Canvas#04070C
  • Ink#EAF2FF
  • Signal#6FD4FF

Use when the product is hardware or software with cool metal and screen presence. Aged brass reads warm and hand-made, which fights an instrument; the cold key keeps the same single-signal discipline in a colder register.

Motion spec

Trigger
One committed scroll past 60% of the hero height, detected by an IntersectionObserver on the reveal stage. Fires once per page load.
Property
transform: scale(1.06 to 1) on the reveal media, plus clip-path: inset(0 38% 0 0) to inset(0). Headline lines animate translateY(110% to 0) inside an overflow-hidden mask.
Duration
1200ms for the reveal; 600ms per headline line at a 150ms stagger.
Easing
cubic-bezier(0.16, 1, 0.3, 1) — nearly all of the distance is covered early, so the object appears to arrive and settle rather than glide.
Never moves
The action control, the date line, and the product itself after the reveal has finished. Once revealed the object never moves again; the only continuous motion allowed anywhere on the page is the single background gradient drift.

Anti-patterns

  • Two ambient loops running at once (gradient drift plus particles), which turns a controlled stage into a screensaver.
  • Showing the product whole in the hero, which leaves the reveal section with nothing left to reveal.
  • A countdown to a date the brief never supplied.
  • Brass used for body copy, borders, or link underlines — it is a single-use signal for the release action.
  • A near-black hero followed by a white section; the luminance drop reads as a different website.
  • Headline text laid over the product's focal area instead of the negative space the crop created.

Direction film

Watch it move.

An eight-second pass through Signal Bloom — the palette, the composition, and the motion language the prompt asks for.

See Signal Bloom built for a real business in Irie Builder

Real interpretations

The same agreement, built more than once.

Independent implementations of this direction. Each was built from the agreement alone — different hands, different code, recognisably the same direction.