# Split sign-in > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The sign-in screen for *Mira*, a planning tool for teams. The viewport is split 45 / 55: the left 576px is a warm off-white column holding a 360px form (floating-label email and password fields, a filled "Continue" button, an "or" rule, and an outlined "Email me a magic link" button that turns into a confirmation). The right 704px is a deep-green panel with two thin concentric circles in the corner, a 40px DM Serif Display testimonial that crossfades to the next quote every 5 seconds, three 40px bar-shaped dots, and a footer meta line. The feeling is calm and print-like; the detail worth copying is the floating label: 56px fields whose label shrinks to 78% and lifts 10px on focus or when the field has a value, with no layout shift. ## Reference behaviour 1. Initial state: email field is prefilled ("priya@loam.studio") so its label is already floated; password is empty with the label at rest; "Keep me signed in" is checked; testimonial 1 is visible and dot 1 is filled. 2. Hover a field: border `--line` → `--ink-3`. Focus: border `--ink`, 3px ring `rgba(31,107,82,.15)`, label lifts (`translateY(-10px) scale(.78)`) and darkens over 180ms. 3. Type into the password field: label stays lifted after blur because the input is no longer `:placeholder-shown`. 4. Click the eye button (40 × 40, inside the field's right edge): input type flips `password` ↔ `text`, the icon swaps to a slashed eye, `aria-pressed` and `aria-label` ("Show password" / "Hide password") update, and focus returns to the input. 5. Hover "Continue": background `--green` → `--green-2`. Submit is prevented in the demo. 6. Click "Email me a magic link": the button's border and text become `--accent`, its label changes to "Link sent to priya@loam.studio · check your email", and further clicks do nothing. 7. Every 5000ms the visible quote fades out and the next fades in (both over 600ms, overlapping, since the figures are absolutely stacked). The corresponding dot fills. 8. Click a dot: jumps to that quote and restarts the 5s timer. Hovering anywhere on the green panel pauses rotation; leaving resumes it. 9. Reduced motion: quotes swap instantly; labels move in 1ms. ## Structure ``` 1280 × 800 ┌──────────────────────────────────┬────────────────────────────────────────────┐ │ ● Mira │ TEAMS ON MIRA ( ) ( ) │ circles 420px, corner │ │ │ │ │ │ │ Welcome back (36px) │ │ │ Sign in to your workspace … │ “We stopped writing status │ │ ┌ Email address ──────────────┐ │ updates. Mira became the │ 40px serif, 18ch max │ │ priya@loam.studio │ │ update.” │ │ └─────────────────────────────┘ │ Ines Halvorsen │ │ ┌ Password ───────────────(o)─┐ │ Head of Product, Fjord Bank │ │ └─────────────────────────────┘ │ │ │ ☑ Keep me signed in Forgot? │ │ │ [ Continue ] │ │ │ ──────────── OR ───────────── │ │ │ [ ✉ Email me a magic link ] │ ▬▬ ── ── │ dots 40×2 │ New to Mira? Create a workspace │ 4.8 / 5 across 1,200 workspaces SOC 2 · EU│ └──────────────────────────────────┴────────────────────────────────────────────┘ 45% = 576px · padding 32/48 55% = 704px · padding 40/56 ``` - `` — `display:grid; grid-template-columns: 45% 1fr`. - `
` — flex column; `.logo` link at top; `
` vertically centred with `margin: auto 0`, width 360px. - `.field` — `position:relative`; `` then `