MarkReveal

Foundations · src/components/MarkReveal/MarkReveal.tsx

The lockup arriving: light wipes across it on the 40 degree rake.

One per surface, at an entrance - a loading screen, the top of a launch page. It is the brand's one piece of performed motion, and a second one on the same page turns an entrance into decoration.

onDone filters on the animation name because the element runs more than one animation and a plain onAnimationEnd would fire on the sheen too, handing over before the wipe finished.

Import

import { MarkReveal } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
src	string	The lockup. Used twice: as the image and as the wipe's mask, so it must be a single asset.
alt	string	Accessible name for the whole animation.
mode	'intro' | 'handoff'	handoff is the shorter form, for a transition between two surfaces rather than an entrance.
size	'sm' | 'md' | 'lg'
symbol	boolean	The symbol alone rather than the full lockup.
tone	'light' | 'dark'
ground	boolean	Set false to drop the ground behind the lockup, e.g. over an existing band.
height	number | string	Reserves vertical space so the surrounding page does not shift when it plays.
onDone	() => void	Fires once the wipe finishes, so a splash can hand over to the app.
className	string