FeatureCard

One thing Okami does, as a tall porcelain card centred down its middle: the title at the top, a big glass object turning in the middle, a few words at the foot. No edge, no shadow, so a row of them sits flat on a white page.

Playground

Bring them back

Reminders before, rebooks at the right interval, and every cancellation offered to someone new.

FeatureCard
GlassIcons

In a row

The landing's pillars: four in a row from xl (the row held to max-w-5xl, so each card is about 244px), two by two from md, one column on phones, 16px apart. One GlassIcons motion="spin" wraps the whole row, so a single WebGL canvas casts every object, each in the colour its tint names. Every item and card takes three of the list's rows (row-span-3 grid-rows-subgrid), so titles, objects and bodies line up across a row.

  • Answer and book

    Every DM and call answered in seconds, in your tone — and booked right there, never twice.

  • Remember everyone

    One memory across channels: the usual service, the last visit, what they mentioned in passing.

  • Bring them back

    Reminders before, rebooks at the right interval, and every cancellation offered to someone new.

  • Grow your name

    The review ask while the glow is still in the mirror — sent where new clients actually look.

Flat

Outside GlassIcons the object stays a flat line in the text colour — the fallback wherever WebGL is missing.

Grow your name

The review ask while the glow is still in the mirror — sent where new clients actually look.

API reference

PropTypeDefaultDescription
iconIconSvgElement—A Hugeicons stroke-rounded glyph, drawn large in the middle — size-32, halved to size-16 on phones. Decorative, and marked for GlassIcons.
tint"studio" | "studio-2"—The glass colour GlassIcons casts the object in, and the card's wash: the studio's first or second colour, from the mix around it (a MixScope — the landing's pillars sit in four). Without it, the row's palette decides.
titleReactNode—A short verb phrase that fits one line on the narrowest card.
level2 | 3 | 43The title's heading level — one below the section's heading.
childrenReactNode—The body: one sentence, about 90 characters — four lines on a 244px card.
classNamestring—Sizing on the surface — row-span-3 grid-rows-subgrid in a row.

Guidelines

  • Wrap the row in one GlassIcons, never each card: every GlassIcons is its own WebGL canvas.
  • A row speaks evenly: every title on one line, every body about the same length, so the cards end level. Check each language.
  • Each card its own colour: leaf for the action, then lilac, sky and butter. On white, never on porcelain — the card is porcelain.