13 skill domains · 42 standards · Verified corpus
Every clause triple-checked by Opus. No sampling. Safety-critical accuracy.
Compliance Hub · Next-Level UI
Animations, transitions, micro-interactions, and loading states that transform a functional interface into a product that feels right.
12 enhancements · All interactive · Click & hover to explore
Content enters with choreographed timing — hero first, then cards, then details. Each layer fades up with a slight vertical offset, creating depth and guiding the eye.
Australian building & product compliance research
Every clause triple-checked by Opus. No sampling. Safety-critical accuracy.
When a query is submitted, the input area smoothly compresses upward while the response area expands below — a fluid hand-off that maintains spatial context.
Internal doors in a Class 2 building must comply with fire resistance requirements in NCC Volume One. Doors forming part of a fire-resisting separation between SOUs or between an SOU and a public corridor must achieve an FRL of –/60/30 per Table C3D10.
AI responses appear character-by-character with a blinking cursor, matching the streaming API delivery. Gives users something to read immediately instead of waiting for the full response.
Citation badges spring into view with a bouncy overshoot as they're referenced in the text. Hovering a badge highlights its source card below — visual linking without leaving context.
Doors forming part of a fire-resisting separation must achieve an FRL of –/60/30 1 and be self-closing with smoke seals per AS 1905.1 2. Internal doors within a single SOU have no specific fire resistance requirement 3.
Click to smoothly reveal clause details. Height animates with CSS, inner content fades in with a slight delay for a layered feel.
Toggling dark/light mode crossfades every color token over 600ms instead of instantly swapping. Everything on this page uses it — try the toggle in the nav bar.
Surface Colors
Accent Tokens
The small details that make a UI feel alive — button feedback, card hover lift, animated copy confirmation, and pulsing report flags.
Buttons
Card Hover Lift
Skeleton screens with accent shimmer, multi-step progress indicators, and a breathing logo pulse — users always know something is happening.
Skeleton Screen
Query Progress Steps
Logo Pulse (while loading)
Researching your query…
When there's nothing to show, don't show nothing. CSS-only geometric art, animated gradient backgrounds, and "getting started" chips turn dead-ends into invitations.
⏱ Low effort · CSS-only art + gradient animation, no imagesA barely-perceptible particle/gradient effect behind the main content area. Adds depth without distraction. Respects prefers-reduced-motion.
⏱ Medium effort · Lightweight canvas particles, ~40 lines JSCorpus coverage dials animate from zero on load — both the ring stroke and the counter count up simultaneously. Great for dashboards and admin views.
Slide in from the top-right with spring easing, auto-dismiss after 4 seconds. Used for copy confirmations, query submission, errors, and system messages.
Switching between views uses a slide + fade transition rather than a hard cut. Content exits in one direction and enters from the other.
All 13 enhancements use Otto's existing design tokens. Most are CSS-only. Total JS is ~150 lines for the interactive bits. Zero external dependencies.