AuraScene

The atmosphere itself — a porcelain sky with two soft washes in the studio's mix, its second colour above and its first below, drifting over 70–90 second cycles. The public chat page lives inside one. Okami's own pages (login) are neutral: Ink's pale greys.

Usage

Wrap the page at its root. The sky is fixed to the viewport, so it stays put while the page scrolls. Here it's framed: a transform on the frame (transform-gpu) makes it the sky's containing block, and overflow-hidden clips the washes to it.

Studio Lumen

Write a message and Studio Lumen will help you book.

Free today

import { AuraScene } from "@/components/shared/aura";

// At the root of a page: the sky fills the viewport.
export default function Page() {
  return (
    <AuraScene>
      <VenueChat />
    </AuraScene>
  );
}

// In a frame, as previewed here.
<div className="squircle-lg relative isolate h-80 transform-gpu overflow-hidden">
  <AuraScene>…</AuraScene>
</div>

API reference

Prop	Type	Default	Description
children	ReactNode	—	The page. The scene is at least the viewport tall, porcelain with ink text, with the sky fixed behind it.

The tokens and keyframes live in globals.css (.aura, .aura-sky): --porcelain and --ink for everything inside, the washes drawn from the mix's --mix-wash-b and --mix-wash-a(Meadow's lilac and leaf deep where no studio sets one). Try the sidebar's studio colours.

Guidelines

One per page, at the root. It sets the .aura tokens (porcelain, ink) for everything inside; the washes come from the studio's mix, so wrap a studio's page in its MixScope, and Okami's own in Ink to keep it neutral.
The drift is the system's only decorative motion — imperceptible on purpose, and still under prefers-reduced-motion.
The washes stay atmospheric: never crank their opacity to make a page "more branded". If a surface needs emphasis, use space and type, not more color.
Anywhere but a page root, frame it — transform-gpu and overflow-hidden on the frame — or the fixed sky escapes and covers the whole viewport.