feat(auth): redesign sign-in page#3547
Conversation
Bring more brand presence to the auth surface while keeping behavior
unchanged. All flow states, query modes, providers, and redirects are
preserved.
Form column:
- Move the Kilo logo above the title and center the stack
- Drop redundant 'Kilo' from titles ('Welcome to Kilo Code' -> 'Welcome
back', 'Create your Kilo Code account' -> 'Create your account')
- Tighten provider button primitive (h-10, bg-card, focus-visible ring,
consistent svg sizing)
- Group Enterprise SSO and 'Get started' link into a centered secondary
footer; brand-yellow on the get-started link as the column's single
brand moment
Marketing column:
- Replace floating bullet text with a contained card surface (matches
#0a0a0a left panel) sitting on a dithered shader background via
@paper-design/shaders-react (paused under prefers-reduced-motion)
- New 'One coding agent / Every model / No subscription' headline with
brand-yellow accent on the closing line
- Convert paragraph bullets into structured rows with brand-yellow
Check icons
- Add 'Trusted by teams at' caption above the customer logo strip
Layout:
- Lock both panes to a true 50/50 split on xl+
- Drop the divider border between the panes
- Force the left main background to #0a0a0a
Logos:
- Refresh all five SVGs to a uniform 154x51 viewBox
- Strip background plates and hardcoded path fills so theming via CSS
works
- Render at fill-foreground with row-level opacity-75 for subtle
presence; entrance animation removed
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| muted | ||
| loop | ||
| preload="auto" | ||
| playsInline |
There was a problem hiding this comment.
WARNING: preload="auto" eagerly downloads the video file for every sign-in flow state that mounts this component. With the component now used in 5 places (hint-loading, magic-link-sent, redirecting, provider-select, and the default form state), this means up to 5 simultaneous requests for /kilo-anim.mp4 on page load.
Consider preload="none" (video only loads when hover triggers play) or preload="metadata" (loads just enough to show a poster frame). The existing AnimatedLogo component shares this pattern, but the multiplication here makes it more impactful.
Also, this component has no prefers-reduced-motion guard. AuthMarketingAside correctly pauses the shader via useReducedMotion(), but this video will still auto-play on hover for users who have opted out of motion.
There was a problem hiding this comment.
Fixed in ddb41f5: switched to preload="none" and added a useReducedMotion() guard so hover playback is skipped under prefers-reduced-motion (with the strict !== true comparison to avoid the SSR null edge case).
| shape="warp" | ||
| type="4x4" | ||
| size={2.5} | ||
| speed={reduceMotion ? 0 : 0.12} |
There was a problem hiding this comment.
WARNING: useReducedMotion() from motion/react returns boolean | null — null during SSR and during initial hydration before the media query fires. The expression reduceMotion ? 0 : 0.12 evaluates to 0.12 when reduceMotion is null (since null is falsy), causing the shader to start animating briefly before the hook resolves to true for users who have prefers-reduced-motion: reduce set. This is a small but real accessibility regression.
Safer guard:
speed={reduceMotion === true ? 0 : 0.12}Or initialize the shader speed to 0 and update it in a useEffect after reduceMotion resolves.
There was a problem hiding this comment.
Fixed in ddb41f5: switched to reduceMotion === true ? 0 : 0.12 so the null SSR/hydration value no longer takes the falsy branch.
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Executive SummaryThe latest commit ( Files Reviewed (3 changed files + 8 unchanged)Changed in this increment:
Unchanged (carried forward from prior review):
Reviewed by claude-sonnet-4.6 · 171,480 tokens Review guidance: REVIEW.md from base branch |
- AuthMarketingAside: use `reduceMotion === true` so the shader speed doesn't briefly animate while `useReducedMotion()` is null during SSR and pre-hydration. - AnimatedLogoMark: same strict comparison plus skip hover playback when reduced motion is set. - AnimatedLogoMark: switch the kilo-anim.mp4 video to `preload="none"` so it isn't fetched on every mount; the mark is now used across multiple sign-in flow states.
Layer the SVG underneath the video so the mark renders immediately on mount. The video element keeps preload="none" and fades in on hover once it has frames. Previously the mark was invisible until the user hovered.
The shared public asset `kilo-v1.svg` hardcodes `fill: #231f20` in an internal style block, which renders almost invisibly on the dark sign-in surface. Apply Tailwind's `invert` filter so the mark renders white without modifying the shared asset (other surfaces use it on light backgrounds).
…e image Drop the hover video, the link wrapper, and all client-side hooks. The mark on the sign-in page only needs to identify the brand; it doesn't need to play on hover or link out. Resulting component is a plain server component rendering the inverted SVG.
Give the form column more room (3/5) and let the marketing aside take the remaining 2/5 on xl+ viewports. Below xl the aside stays hidden, so the form still fills the visible row.
2 participants
Summary
Visual redesign of
/users/sign_in. No auth behavior changes.SigninButtontightened toh-10 bg-cardwith proper focus ring.@paper-design/shaders-react, gated toxl+and paused under reduced-motion). New stacked headline, structured bullet rows, customer logos under "Trusted by teams at".xl+(form / marketing), no divider, left panel#0a0a0a.154×51.New dep:
@paper-design/shaders-react@0.0.76inapps/web.Verification
/users/sign_inat 375 / 768 / 1024 / 1280 / 1440 px.?signup=true,?sso=true,?email=…&org=…,?error=DIFFERENT-OAUTH.Visual Changes