Mark in motion

The Ramson mark as something you can move. Its four shapes and the assembled mark are libraries for the beat machine, so a story places the mark on the Relief stage, poses it per beat, and plays back anywhere a stage runs. This is the mark's own story: apart, together, closer, the hover fling, and rest.

It also runs full screen at /beat-machine/ramson.

Usage

import { BeatMachine } from '@/components/beat-machine';
import { ramsonLibrary, ramsonLitIsoLibrary } from '@/components/beat-machine/libraries/ramson';

<BeatMachine
  libraries={[ramsonLibrary, ramsonLitIsoLibrary]}
  storageKey="my-app:ramson-story"
/>

Two libraries

ramsonLibrary draws the mark the way the brand files do, as solid extrusions of the SVG shapes. mark is the four shapes assembled, and its explode is the fling the site's hero does on hover. Each shape also stands alone as bracket, arch, notch, and ring. Every kind lies flat or stands up, turns, and has a depth, and its presets are Assemble, Fling, Drop, Turn, and Rise.

ramsonLitIsoLibrary stands the four outlined marks on the cell as shaded volumes in the lit iso look, with a size, a thickness, a bevel, and a lift. It uses the lit iso library's grid and presets, so a story can place both side by side.

Brand color is the point

Everywhere else on the stage, fills take surface roles and follow the look. A mark is the exception: its layers carry the brand's own colors as fill, so the mark reads the same in every look. mono swaps them for the one green.

Accessibility

• The stage is role="img" and named by its label, or by the current beat's subtext, and it is hidden from assistive tech when it has neither. Write the subtext as the line you want heard.
• Under reduced motion the stage cuts between beats instead of easing, so the fling never plays.

When to use something else

For a mark that sits still, in a header, a footer, or an email, use BrandMark from the press kit or the hosted SVGs. Mark in motion is for stories.

Install

shadcn add @gesso/ramson-motion