Skip to content

fix(web): honor reduced-motion preferences across product UI #4855

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FaisalMisbah23 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix(web): honor reduced-motion preferences across product UI #4855

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79b4d28
fix(web): honor reduced-motion preferences across product UI
FaisalMisbah23 Jul 29, 2026
946c350
fix(web): address review feedback for reduced-motion
FaisalMisbah23 Jul 29, 2026
515a00c
fix(web): remove duplicate story file from wrong directory
FaisalMisbah23 Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 66 additions & 56 deletions apps/web/src/app/(app)/gastown/onboarding/OnboardingStepModel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client';

import { useMemo, useState } from 'react';
import { motion } from 'motion/react';
import { motion, useReducedMotion } from 'motion/react';
import { X } from 'lucide-react';
import { cn } from '@/lib/utils';
import { ModelCombobox, type ModelOption } from '@/components/shared/ModelCombobox';
Expand All @@ -18,58 +18,64 @@ import type { ModelPreset, PresetConfig } from './onboarding.domain';

/** Animated gradient blobs that create an ethereal neon glow inside the frontier card. */
function FrontierGlow() {
const shouldReduce = useReducedMotion();
return (
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-lg">
{/* Base ambient glow */}
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,oklch(85%_0.18_160_/_0.08),transparent_70%)]" />

{/* Drifting blob 1 — teal/cyan */}
<motion.div
className="absolute h-32 w-32 rounded-full bg-[radial-gradient(circle,oklch(80%_0.2_180_/_0.25),transparent_70%)] blur-xl"
animate={{
x: ['-20%', '60%', '10%', '-20%'],
y: ['10%', '-30%', '50%', '10%'],
scale: [1, 1.3, 0.9, 1],
}}
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '10%', left: '5%' }}
/>

{/* Drifting blob 2 — violet/purple */}
<motion.div
className="absolute h-28 w-28 rounded-full bg-[radial-gradient(circle,oklch(75%_0.2_300_/_0.2),transparent_70%)] blur-xl"
animate={{
x: ['50%', '-10%', '40%', '50%'],
y: ['-20%', '40%', '-10%', '-20%'],
scale: [1.1, 0.8, 1.2, 1.1],
}}
transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '20%', right: '10%' }}
/>

{/* Drifting blob 3 — green/lime */}
<motion.div
className="absolute h-24 w-24 rounded-full bg-[radial-gradient(circle,oklch(90%_0.18_130_/_0.18),transparent_70%)] blur-xl"
animate={{
x: ['30%', '-30%', '50%', '30%'],
y: ['60%', '10%', '-20%', '60%'],
scale: [0.9, 1.2, 1, 0.9],
}}
transition={{ duration: 7, repeat: Infinity, ease: 'easeInOut' }}
style={{ bottom: '5%', left: '20%' }}
/>

{/* Drifting blob 4 — pink/magenta */}
<motion.div
className="absolute h-20 w-20 rounded-full bg-[radial-gradient(circle,oklch(80%_0.2_350_/_0.15),transparent_70%)] blur-lg"
animate={{
x: ['-10%', '70%', '20%', '-10%'],
y: ['30%', '-20%', '60%', '30%'],
scale: [1, 1.4, 0.7, 1],
}}
transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '40%', left: '40%' }}
/>
{/* Drifting blobs — decorative, skip under reduced motion */}
{!shouldReduce && (

@jrf0110 jrf0110 Jul 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to use the automatic method for respecting user motion preferences?

@FaisalMisbah23 FaisalMisbah23 Jul 31, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a hybrid approach works best here.

We can use <MotionConfig reducedMotion="user"> at the root level to reduce boilerplate and automatically respect the user preference for motion across standard Motion components. Motion will disable transform and layout animations for reduced motion users while other supported animations can still run.

However useReducedMotion is still useful for components where we explicitly want to change the rendering logic. For example in FrontierGlow (OnboardingStepModel.tsx) the drifting blobs are purely decorative so using !shouldReduce lets us avoid rendering them entirely instead of leaving them as static background elements.

Proposed solution:

Add <MotionConfig reducedMotion="user"> around the root providers so standard Motion components respect reduced motion automatically

Keep useReducedMotion only in components where reduced motion requires conditional rendering or other custom logic such as FrontierGlow

<>
{/* Drifting blob 1 — teal/cyan */}
<motion.div
className="absolute h-32 w-32 rounded-full bg-[radial-gradient(circle,oklch(80%_0.2_180_/_0.25),transparent_70%)] blur-xl"
animate={{
x: ['-20%', '60%', '10%', '-20%'],
y: ['10%', '-30%', '50%', '10%'],
scale: [1, 1.3, 0.9, 1],
}}
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '10%', left: '5%' }}
/>

{/* Drifting blob 2 — violet/purple */}
<motion.div
className="absolute h-28 w-28 rounded-full bg-[radial-gradient(circle,oklch(75%_0.2_300_/_0.2),transparent_70%)] blur-xl"
animate={{
x: ['50%', '-10%', '40%', '50%'],
y: ['-20%', '40%', '-10%', '-20%'],
scale: [1.1, 0.8, 1.2, 1.1],
}}
transition={{ duration: 10, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '20%', right: '10%' }}
/>

{/* Drifting blob 3 — green/lime */}
<motion.div
className="absolute h-24 w-24 rounded-full bg-[radial-gradient(circle,oklch(90%_0.18_130_/_0.18),transparent_70%)] blur-xl"
animate={{
x: ['30%', '-30%', '50%', '30%'],
y: ['60%', '10%', '-20%', '60%'],
scale: [0.9, 1.2, 1, 0.9],
}}
transition={{ duration: 7, repeat: Infinity, ease: 'easeInOut' }}
style={{ bottom: '5%', left: '20%' }}
/>

{/* Drifting blob 4 — pink/magenta */}
<motion.div
className="absolute h-20 w-20 rounded-full bg-[radial-gradient(circle,oklch(80%_0.2_350_/_0.15),transparent_70%)] blur-lg"
animate={{
x: ['-10%', '70%', '20%', '-10%'],
y: ['30%', '-20%', '60%', '30%'],
scale: [1, 1.4, 0.7, 1],
}}
transition={{ duration: 9, repeat: Infinity, ease: 'easeInOut' }}
style={{ top: '40%', left: '40%' }}
/>
</>
)}

{/* Outer glow ring */}
<div className="absolute inset-0 rounded-lg ring-1 ring-inset ring-white/[0.08]" />
Expand All @@ -87,6 +93,7 @@ function PresetCard({
onSelect: () => void;
}) {
const isFrontier = preset.key === 'frontier';
const shouldReduce = useReducedMotion();

return (
<button
Expand All @@ -110,7 +117,7 @@ function PresetCard({
<motion.div
layoutId="preset-ring"
className="pointer-events-none absolute inset-0 rounded-lg ring-1 ring-[color:oklch(95%_0.15_108_/_0.5)]"
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
transition={shouldReduce ? { duration: 0 } : { type: 'spring', stiffness: 400, damping: 30 }}
/>
)}

Expand All @@ -136,6 +143,7 @@ function PresetCard({
}

function CustomCard({ isSelected, onSelect }: { isSelected: boolean; onSelect: () => void }) {
const shouldReduce = useReducedMotion();
return (
<button
type="button"
Expand All @@ -152,7 +160,7 @@ function CustomCard({ isSelected, onSelect }: { isSelected: boolean; onSelect: (
<motion.div
layoutId="preset-ring"
className="pointer-events-none absolute inset-0 rounded-lg ring-1 ring-[color:oklch(95%_0.15_108_/_0.5)]"
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
transition={shouldReduce ? { duration: 0 } : { type: 'spring', stiffness: 400, damping: 30 }}
/>
)}

Expand Down Expand Up @@ -187,11 +195,12 @@ function ModelRolePickers({
isLoadingModels: boolean;
modelsError: string | undefined;
}) {
const shouldReduce = useReducedMotion();
return (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{ duration: 0.2 }}
initial={shouldReduce ? {} : { opacity: 0, height: 0 }}
animate={shouldReduce ? {} : { opacity: 1, height: 'auto' }}
transition={shouldReduce ? { duration: 0 } : { duration: 0.2 }}
className="overflow-hidden"
>
<div className="mt-4 space-y-3 rounded-lg border border-white/[0.06] bg-white/[0.02] p-4">
Expand Down Expand Up @@ -245,6 +254,7 @@ function CustomModelPicker({
modelOptions: ModelOption[];
isLoadingModels: boolean;
}) {
const shouldReduce = useReducedMotion();
const roleRows: [string, string, (v: string) => void][] = [
['Mayor', customMayor, setCustomMayor],
['Refinery', customRefinery, setCustomRefinery],
Expand All @@ -253,9 +263,9 @@ function CustomModelPicker({

return (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{ duration: 0.2 }}
initial={shouldReduce ? {} : { opacity: 0, height: 0 }}
animate={shouldReduce ? {} : { opacity: 1, height: 'auto' }}
transition={shouldReduce ? { duration: 0 } : { duration: 0.2 }}
className="mt-4 overflow-hidden"
>
<div className="space-y-3 rounded-lg border border-white/[0.06] bg-white/[0.02] p-4">
Expand Down
18 changes: 18 additions & 0 deletions apps/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,16 @@
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
Comment thread
emilieschario marked this conversation as resolved.
Outdated
transition-duration: 0.01ms !important;
}
}

/*
Tailwind CSS v4 defaults border color to `currentcolor`. Keep implicit
borders on Kilo's semantic border token so legacy bare `border` utilities
Expand Down Expand Up @@ -437,6 +447,14 @@
animation: pulse-glow 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
.animate-pulse-once {
animation: none;
transform: scale(1);
box-shadow: none;
}
}

@keyframes usage-pending-bar {
0%,
12% {
Expand Down
8 changes: 5 additions & 3 deletions apps/web/src/components/HeaderLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import Link from 'next/link';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'motion/react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
import { usePathname } from 'next/navigation';
import { useState } from 'react';

Expand All @@ -18,6 +18,8 @@ export default function HeaderLogo({ className, href }: HeaderLogoProps) {
const pathname = usePathname();
const [isHovered, setIsHovered] = useState(false);

const shouldReduceMotion = useReducedMotion();

const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
if (pathname === href) {
e.preventDefault();
Expand All @@ -30,8 +32,8 @@ export default function HeaderLogo({ className, href }: HeaderLogoProps) {
<motion.div
className="relative flex size-12 flex-none items-center justify-center overflow-hidden font-bold"
aria-hidden="true"
animate={{ rotate: isHovered ? 90 : 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
animate={shouldReduceMotion ? {} : { rotate: isHovered ? 90 : 0 }}
transition={shouldReduceMotion ? {} : { duration: 0.3, ease: 'easeInOut' }}
style={{ transformStyle: 'preserve-3d' }}
>
<AnimatePresence>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/cloud-agent-next/TypingIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export function TypingIndicator() {
<Bot className="h-4 w-4" />
</div>
<div className="mt-2 flex gap-1">
<div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" />
<div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" />
<div className="h-2 w-2 animate-bounce rounded-full bg-gray-400" />
<div className="motion-reduce:bg-gray-400 motion-reduce:opacity-40 h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.3s]" />

@kilo-code-bot kilo-code-bot Bot Jul 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WARNING: motion-reduce:opacity-40 does not stop the bounce animation, and motion-reduce:bg-gray-400 is a no-op

Two issues with the added utility classes on these three dots:

  1. motion-reduce:bg-gray-400 sets the same background color that's already applied unconditionally (bg-gray-400), so it has no effect under reduced motion.
  2. animate-bounce itself is never disabled here (no motion-reduce:animate-none), so this change alone does not stop the animation. The bounce is only neutralized because of the unrelated global reset in apps/web/src/app/globals.css (animation-iteration-count: 1 !important / animation-duration: 0.01ms !important). If that global rule is ever scoped down or removed, these dots will keep bouncing despite this "fix". Consider adding motion-reduce:animate-none directly on these elements so the intent is explicit and self-contained.

Reply with @kilocode-bot fix it to have Kilo Code address this issue.

<div className="motion-reduce:bg-gray-400 motion-reduce:opacity-40 h-2 w-2 animate-bounce rounded-full bg-gray-400 [animation-delay:-0.15s]" />
<div className="motion-reduce:bg-gray-400 motion-reduce:opacity-40 h-2 w-2 animate-bounce rounded-full bg-gray-400" />
</div>
</div>
);
Expand Down
32 changes: 17 additions & 15 deletions apps/web/src/components/gastown/BeadBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
import { Trash2, Clock, Play } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import { motion, AnimatePresence } from 'motion/react';
import { motion, AnimatePresence, useReducedMotion } from 'motion/react';

type Bead = {
bead_id: string;
Expand Down Expand Up @@ -219,16 +219,18 @@ export function BeadBoard({
);
}

const shouldReduce = useReducedMotion();
Comment thread
emilieschario marked this conversation as resolved.
Outdated

return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
{statusColumns.map((status, colIdx) => {
const columnBeads = beads.filter(b => b.status === status && b.type !== 'agent');
return (
<motion.div
key={status}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: colIdx * 0.08, duration: 0.3 }}
initial={shouldReduce ? {} : { opacity: 0, y: 12 }}
animate={shouldReduce ? {} : { opacity: 1, y: 0 }}
transition={shouldReduce ? { duration: 0 } : { delay: colIdx * 0.08, duration: 0.3 }}
>
<div className="mb-3 flex items-center gap-2">
<span
Expand All @@ -241,21 +243,21 @@ export function BeadBoard({
</span>
<motion.span
key={columnBeads.length}
initial={{ scale: 1.3, opacity: 0.5 }}
animate={{ scale: 1, opacity: 1 }}
initial={shouldReduce ? {} : { scale: 1.3, opacity: 0.5 }}
animate={shouldReduce ? {} : { scale: 1, opacity: 1 }}
className="text-xs text-white/45"
>
{columnBeads.length}
</motion.span>
</div>
<div className="space-y-2">
<AnimatePresence mode="popLayout" initial={false}>
<AnimatePresence mode={shouldReduce ? 'sync' : 'popLayout'} initial={false}>
{columnBeads.length === 0 && (
<motion.p
key="empty"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
initial={shouldReduce ? {} : { opacity: 0 }}
animate={shouldReduce ? {} : { opacity: 1 }}
exit={shouldReduce ? {} : { opacity: 0 }}
className="py-4 text-center text-xs text-white/35"
>
No beads
Expand All @@ -264,11 +266,11 @@ export function BeadBoard({
{columnBeads.map(bead => (
<motion.div
key={bead.bead_id}
layout
initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: -10 }}
transition={{
layout={!shouldReduce}
initial={shouldReduce ? {} : { opacity: 0, scale: 0.95, y: 10 }}
animate={shouldReduce ? {} : { opacity: 1, scale: 1, y: 0 }}
exit={shouldReduce ? {} : { opacity: 0, scale: 0.95, y: -10 }}
transition={shouldReduce ? { duration: 0 } : {
layout: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1] },
opacity: { duration: 0.2 },
scale: { duration: 0.2 },
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ui/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ function Sidebar({
<div
data-slot="sidebar-gap"
className={cn(
'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
'relative w-(--sidebar-width) bg-transparent motion-reduce:transition-none transition-[width] duration-200 ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
Expand Down
18 changes: 18 additions & 0 deletions apps/web/src/stories/ReducedMotion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import type { StoryObj } from '@storybook/react';

@kilo-code-bot kilo-code-bot Bot Jul 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CRITICAL: New story file is in the wrong directory and missing the required default export - it will not be picked up by Storybook

Two problems:

  1. Storybook's config (apps/storybook/.storybook/main.ts) only globs ../stories/**/*.stories.@(js|jsx|mjs|ts|tsx), i.e. apps/storybook/stories/. This file lives in apps/web/src/stories/ instead, so Storybook will never discover it.
  2. Even if it were in the right location, Storybook's Component Story Format requires a default export with at least a title (see other files in apps/storybook/stories/*.stories.tsx, e.g. export default { title: '...' }). This file has no default export, so it would fail to register as a story module.

Move this file to apps/storybook/stories/ReducedMotion.stories.tsx and add a default export with a title (and typically a Meta type import), following the pattern used by the other story files in that directory.

Reply with @kilocode-bot fix it to have Kilo Code address this issue.

import { TypingIndicator } from '@/components/cloud-agent-next/TypingIndicator';
import HeaderLogo from '@/components/HeaderLogo';

type Story = StoryObj;

export const Normal: Story = {
render: () => (
<div className="flex flex-col gap-4">
<TypingIndicator />
<HeaderLogo />
</div>
),
};

export const ReducedMotion: Story = {
render: Normal.render,
};