Skip to content

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped

Motir · Work items

MOTIR-4234To Do

18 (motir-core) The same opaque shell canvas masks FOUR more styles — glassmorphism, aurora, cybercore and retrofuturism paint a `body` atmosphere the signed-in shell covers, and neumorphism's moulded field never reaches it either

Type

Implementation defect (code).

Parent

Root sibling. Found while running MOTIR-4230, which is itself a root-level bug with no story and no non-terminal discovery epic to contain it; fixing this is not part of finishing MOTIR-4230 (whose second acceptance criterion explicitly preserves the ordinary page-background treatment for non-3D styles), so the finding card does not earn containment.

Discovered in

Measured while verifying MOTIR-4230's fix, with the same headless-Chromium harness over the real compiled stylesheet.

The defect

MOTIR-4230 is one instance of a general one. The signed-in shell root — components/ui/AppLayout.tsx and the platform-admin app/(admin)/_components/AdminShell.tsx — is a h-dvh overflow-hidden box carrying bg-(--el-page-bg), an OPAQUE fill over the whole viewport. Every style that expresses its identity as a body-level canvas is therefore invisible on every signed-in route, and only 3D / Immersive has been fixed.

Measured in headless Chromium against app/globals.css + packages/design-system/theme.css compiled by @tailwindcss/postcss, rendering the shipped AppLayout markup class-for-class, light theme, data-palette="motir":

data-stylebody background-imageshell root
glassmorphism4 radial washes (theme.css ~L620)none
aurora4 drifting ribbons (~L983)none
cybercore-y2kthe tech grid (~L879)none
retrofuturismthe synthwave sky (~L2146)none

and neumorphism (~L1955) sets body { background-color: var(--el-surface) } — measured rgb(246, 245, 244) — while the shell root paints rgb(255, 255, 255) over it, so the "moulded out of the same material" illusion the style is built on never reaches the app frame.

Glassmorphism is the sharpest case: its rail rule ([data-surface='sidebar']) is a translucent fill plus backdrop-filter: blur(...), and the thing it is blurring is the flat opaque shell, not the vibrant canvas the style's own comment says the frosted panels exist to blur ("The gradient is what the frosted panels blur — without it, the blur is invisible").

retrofuturism additionally paints a body::after grid floor at z-index: -1, which is behind the shell root too.

Root cause / fix

Same cause as MOTIR-4230, one tier up: the shell canvas is opaque and the style layer paints the page canvas.

MOTIR-4230 ships the mechanism this needs — a data-app-shell attribute on both shell roots, and the 3D atmosphere rule painting body, [data-app-shell] from one rule. Generalising is a per-style repeat of that pairing: add [data-app-shell] to each style's own canvas rule's selector list (glassmorphism, aurora, cybercore-y2k, retrofuturism, neumorphism), keeping ONE rule per style rather than a second copy, and carry background-attachment: fixed where the body rule has it so the two members resolve against the same box.

Two things to settle rather than assume while doing it:

  • aurora ANIMATES its canvas (background-position drift over --aurora-drift-duration, with a prefers-reduced-motion: reduce arm setting animation: none). Painting the shell must carry BOTH arms, or a reduced-motion user gets a drifting shell.
  • retrofuturism's body::after grid floor is a position: fixed pseudo-element at z-index: -1. Check whether it composites above the shell canvas once that canvas is painted, or whether it needs its own disposition — a z-index: -1 layer and a newly painted ancestor background are exactly the pair whose stacking a code reading gets wrong.

Acceptance criteria

  1. Under each of glassmorphism, aurora, cybercore-y2k and retrofuturism, a signed-in route's shell canvas resolves the SAME background-image as body does in that state, rather than none.
  2. Under neumorphism, the shell canvas resolves the same background-color as body (--el-surface), so panels read as moulded out of the field.
  3. Aurora's drift is present on the shell canvas for a no-preference user and absent under prefers-reduced-motion: reduce, matching the body arm exactly.
  4. Retrofuturism's body::after grid floor is still visible above the shell canvas and below all app content, stated with the measurement that shows it.
  5. A style that paints no canvas of its own (warm-editorial, soft-playful, swiss-minimal-flat, neo-brutalism, hand-drawn-indie) is unchanged — the shell keeps its --el-page-bg fill.
  6. tests/theme/immersiveShellAtmosphere.test.ts is widened (or a sibling guard added) so the pairing is asserted per style rather than for 3D / Immersive alone, and the rendered half in tests/e2e/shell-immersive-atmosphere.spec.ts covers at least one additional style.

Resolution

Open — no fix has shipped. The data-app-shell hook it builds on lands with MOTIR-4230.