Okra · design studio
A studio for brands that refuse to sit still
Identity, motion and websites for founders across Lagos, Accra and Nairobi. Small team, senior hands, fast answers.
- Brand identity
- Motion
- Websites
- Type
- Packaging
- Campaigns
- 3D
- Editorial
- Art direction
- Sound
- Lagos
- Accra
- Nairobi
- Paris
- Anywhere
Marquee type
Oversized words slide in opposite rows under the headline; a row slows under the pointer and scrolling pushes them faster.
Use when: Studios, agencies, festivals and brands with a short list to shout: services, places, values, lineups.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/marquee-typeFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–70 chars) | — | The promise in one line, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| rows * | array[] (2–4) | — | Two to four rows of short words: services, places, values. Each row slides on its own. |
| rowsLabel | string (≤ 40 chars) | — | What the rows list, for assistive technology, e.g. “What we do”. |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number (0.1–4) | 1 | How fast the rows slide. |
| direction | "alternate" | "left" | "right" | "alternate" | Which way the rows slide; `alternate` flips every other row. |
| look | "mixed" | "solid" | "outline" | "mixed" | Filled letters, outlined letters, or one of each in turn. |
| tilt | number (-8–8) | -3 | The band's angle, in degrees. |
| accent | string | "var(--brand, oklch(0.62 0.2 262))" | The colour of the separators and of a word under the pointer. |
| separator | string (≤ 3 chars) | "✦" | Between two words. |
| pointer | boolean | true | A row slows down under the pointer, and stops while pressed. |
| scroll | boolean | true | Scrolling the page pushes the rows faster for a moment. |
The same hero as a Web Component
Web Component · no framework
<sg-marquee-type>
The same engine, driven by attributes: outlined, flat, all to the left, a slash between words.
- Friday
- Saturday
- Sunday
- Afrobeats
- Amapiano
- Highlife
- Jazz