Etched Light Reveal
Logo & brandA wordmark cut into a brushed plate, invisible until a raking light travels across and catches the walls of the groove
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 5 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Wordmark *wordmark · string
The engraved mark. One word reads best, the reveal depends on strokes wide enough to hold a highlight and a shadow.
now: MOTIONSTASH
- Taglinetagline · string
Line under the mark, printed on the plate rather than engraved into it.
now: Registry
- Depthdepth · number
How deep the engraving is cut. Higher offsets the highlight and shadow further, which reads as a deeper groove.
now: 0.6
- Brushedbrushed · boolean
Draw the plate as brushed metal. Turn off for a matte machined surface.
now: true
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A logo reveal with no animation on the logo at all. The wordmark is engraved into a brushed metal plate from the first frame and is only revealed because a light rakes across the surface and starts catching the walls of the cut. Get the physics right: on an engraved letter the shadow falls toward the light and the highlight away from it, which is the opposite of an embossed one. Park the light at a low angle where engraving reads best, then pass one broad specular band across to deepen the cut.
