diff --git a/website/index.html b/website/index.html
index 7773054..a183ebc 100644
--- a/website/index.html
+++ b/website/index.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body class="bg-background text-foreground">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:outline-none focus:ring-2 focus:ring-cyan-400">
+      Skip to content
+    </a>
     <div id="root"></div>
   </body>
 </html>
diff --git a/website/src/App.tsx b/website/src/App.tsx
index 58d832d..ca1324b 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -187,7 +187,11 @@ export default function App() {
 
   return (
     <div className="min-h-screen bg-transparent px-4 py-12 text-foreground sm:px-8">
-      <div className="mx-auto flex w-full max-w-6xl flex-col gap-10">
+      <div
+        id="main-content"
+        tabIndex={-1}
+        className="mx-auto flex w-full max-w-6xl flex-col gap-10 outline-none"
+      >
         <header className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
           <div className="space-y-4">
             <div className="inline-flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/90">
@@ -210,6 +214,8 @@ export default function App() {
                 <img
                   src="https://assets.rspack.rs/rspack/rspack-logo.svg"
                   alt="Rspack logo"
+                  width="40"
+                  height="40"
                   className="relative h-10 w-10 drop-shadow-[0_4px_18px_rgba(34,211,238,0.75)]"
                 />
               </span>
@@ -224,7 +230,7 @@ export default function App() {
                 href={GITHUB_REPO_URL}
                 target="_blank"
                 rel="noreferrer"
-                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/40 bg-white/5 text-white/80 transition hover:bg-white/10 hover:text-white"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/40 bg-white/5 text-white/80 transition-[background-color,color] hover:bg-white/10 hover:text-white"
                 aria-label="Open GitHub repository"
               >
                 <span className="sr-only">GitHub</span>
@@ -243,7 +249,7 @@ export default function App() {
               <div className="relative" ref={repoMenuRef}>
                 <button
                   type="button"
-                  className="inline-flex items-center gap-1 rounded-full border border-border/40 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-white/80 transition hover:bg-white/10 hover:text-white"
+                  className="inline-flex items-center gap-1 rounded-full border border-border/40 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-white/80 transition-[background-color,color] hover:bg-white/10 hover:text-white"
                   aria-haspopup="menu"
                   aria-expanded={isRepoMenuOpen}
                   onClick={() => setIsRepoMenuOpen((open) => !open)}
@@ -252,7 +258,7 @@ export default function App() {
                   <svg
                     aria-hidden="true"
                     viewBox="0 0 12 12"
-                    className={`h-3 w-3 transition-transform ${isRepoMenuOpen ? 'rotate-180' : ''}`}
+                    className={`h-3 w-3 transition-transform motion-safe:duration-200 ${isRepoMenuOpen ? 'rotate-180' : ''}`}
                     fill="none"
                     role="img"
                   >
@@ -275,7 +281,7 @@ export default function App() {
                             href={repo.url}
                             target="_blank"
                             rel="noreferrer"
-                            className="block rounded-md px-2.5 py-1.5 text-sm text-foreground/85 transition hover:bg-white/10 hover:text-white"
+                            className="block rounded-md px-2.5 py-1.5 text-sm text-foreground/85 transition-[background-color,color] hover:bg-white/10 hover:text-white"
                             onClick={() => setIsRepoMenuOpen(false)}
                           >
                             {repo.label}
@@ -424,7 +430,7 @@ function StackStatusCard({
         {statuses.map((stack) => {
           const isActive = stack.id === activeStack;
           const baseClasses =
-            'flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.04] px-3 py-3 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black/30';
+            'flex items-center justify-between rounded-lg border border-white/10 bg-white/[0.04] px-3 py-3 transition-[background-color,border-color] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-black/30';
           return (
             <button
               type="button"
@@ -442,7 +448,7 @@ function StackStatusCard({
                 {stack.label}
               </span>
               <span
-                className={`inline-flex h-3.5 w-3.5 shrink-0 rounded-full ${STACK_STATUS_CLASS[stack.status]}`}
+                className={`inline-flex h-3.5 w-3.5 shrink-0 rounded-full motion-safe:animate-[glow-pulse_2s_ease-in-out_infinite] ${STACK_STATUS_CLASS[stack.status]}`}
                 aria-hidden="true"
               />
             </button>
diff --git a/website/src/components/timeline.tsx b/website/src/components/timeline.tsx
index 5d8de10..f382348 100644
--- a/website/src/components/timeline.tsx
+++ b/website/src/components/timeline.tsx
@@ -137,7 +137,7 @@ export function Timeline({
               value={externalSelectedStack}
               onValueChange={(value) => onStackChange?.(value)}
             >
-              <SelectTrigger className="w-52">
+              <SelectTrigger className="w-52" aria-label="Select stack">
                 <div className="flex flex-1 items-center justify-between gap-2">
                   <span className="truncate font-medium text-foreground/90">
                     {selectedStackMeta?.label ?? 'Select stack'}
@@ -152,7 +152,7 @@ export function Timeline({
                     </Badge>
                   ) : null}
                 </div>
-                <SelectValue className="sr-only" placeholder="Select stack" />
+                <SelectValue className="sr-only" placeholder="Select stack…" />
               </SelectTrigger>
               <SelectContent>
                 {stacks?.map((stack) => (
@@ -181,7 +181,7 @@ export function Timeline({
           </label>
           <Select value={selectedSuite} onValueChange={setSelectedSuite}>
             <SelectTrigger id="suite-filter" className="w-64">
-              <SelectValue placeholder="Select suite">
+              <SelectValue placeholder="Select suite…">
                 {selectedSuite === 'all' ? 'All suites' : selectedSuite}
               </SelectValue>
             </SelectTrigger>
@@ -214,6 +214,8 @@ export function Timeline({
                 <img
                   src={netlifyLogomark}
                   alt=""
+                  width="14"
+                  height="14"
                   className="h-3.5 w-3.5 mr-1"
                   loading="lazy"
                 />
@@ -228,7 +230,10 @@ export function Timeline({
       ) : null}
 
       {filteredEntries.length > 0 ? (
-        <div className="grid gap-3">
+        <div
+          className="grid gap-3"
+          style={{ contentVisibility: 'auto', containIntrinsicSize: '1000px' }}
+        >
           {filteredEntries.map((entry, index) => {
             const commitStyles =
               commitStatusStyles[entry.overallStatus] ??
@@ -273,7 +278,7 @@ export function Timeline({
                   >
                     <span
                       className={cn(
-                        'h-3.5 w-3.5 rounded-full',
+                        'h-3.5 w-3.5 rounded-full motion-safe:animate-[glow-pulse_2s_ease-in-out_infinite]',
                         commitStyles.dotCore,
                       )}
                     />
@@ -295,6 +300,8 @@ export function Timeline({
                       <img
                         src={avatarUrl}
                         alt={entry.author?.name ?? 'Author'}
+                        width="32"
+                        height="32"
                         className={cn(
                           'h-8 w-8 flex-none border-2 border-border/40 bg-black/40',
                           isRenovateBot ? 'rounded-[6px]' : 'rounded-full',
@@ -309,7 +316,7 @@ export function Timeline({
                             href={commitUrl}
                             target="_blank"
                             rel="noreferrer"
-                            className="inline-flex items-center gap-2 text-foreground transition hover:text-foreground/70"
+                            className="inline-flex items-center gap-2 text-foreground transition-[color] hover:text-foreground/70"
                           >
                             <span className="truncate">
                               {entry.commitMessage}
@@ -321,7 +328,7 @@ export function Timeline({
                         </CardTitle>
                         <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
                           <a
-                            className="inline-flex items-center gap-1 rounded border border-border/50 bg-black/40 px-2 py-0.5 font-mono tracking-tight text-foreground/85 transition hover:border-border hover:text-foreground"
+                            className="inline-flex items-center gap-1 rounded border border-border/50 bg-black/40 px-2 py-0.5 font-mono tracking-tight text-foreground/85 transition-[border-color,color] hover:border-border hover:text-foreground"
                             href={commitUrl}
                             target="_blank"
                             rel="noreferrer"
@@ -370,7 +377,7 @@ export function Timeline({
                         </Badge>
                         <a
                           href={entry.workflowRunUrl}
-                          className="text-[11px] text-muted-foreground transition hover:text-foreground/90"
+                          className="text-[11px] text-muted-foreground transition-[color] hover:text-foreground/90"
                           target="_blank"
                           rel="noreferrer"
                         >
@@ -400,7 +407,7 @@ export function Timeline({
                               target="_blank"
                               rel="noreferrer"
                               className={cn(
-                                'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition hover:border-border hover:bg-black/15',
+                                'flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-xs font-medium transition-[background-color,border-color] hover:border-border hover:bg-black/15',
                                 suiteStyles.container,
                               )}
                             >
diff --git a/website/src/components/ui/button.tsx b/website/src/components/ui/button.tsx
index 5a12334..7a526f7 100644
--- a/website/src/components/ui/button.tsx
+++ b/website/src/components/ui/button.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const baseClasses =
-  'inline-flex items-center justify-center rounded-xl text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50';
+  'inline-flex items-center justify-center rounded-xl text-sm font-medium transition-[background-color,color,box-shadow] motion-safe:duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50';
 
 const variants = {
   default: 'bg-foreground text-background hover:bg-foreground/90',
diff --git a/website/src/components/ui/select.tsx b/website/src/components/ui/select.tsx
index 0980a83..59b677e 100644
--- a/website/src/components/ui/select.tsx
+++ b/website/src/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex h-11 w-full items-center justify-between rounded-xl border border-border/60 bg-transparent px-4 py-2 text-sm text-foreground shadow-sm transition hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50',
+      'inline-flex h-11 w-full items-center justify-between rounded-xl border border-border/60 bg-transparent px-4 py-2 text-sm text-foreground shadow-sm transition-[background-color,border-color,color,box-shadow] motion-safe:duration-200 hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const SelectContent = forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'z-50 min-w-[14rem] overflow-hidden rounded-2xl border border-border/40 bg-popover/95 shadow-xl backdrop-blur-xl animate-in fade-in-0 zoom-in-95',
+        'z-50 min-w-[14rem] overflow-hidden rounded-2xl border border-border/40 bg-popover/95 shadow-xl backdrop-blur-xl motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95',
         position === 'popper' && 'translate-y-2',
         className,
       )}
@@ -73,7 +73,7 @@ const SelectItem = forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-pointer select-none items-center rounded-xl border border-transparent px-3 py-2 text-sm outline-none transition focus:bg-accent/60 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:border-border data-[state=checked]:bg-accent/80 data-[state=checked]:text-foreground',
+      'relative flex w-full cursor-pointer select-none items-center rounded-xl border border-transparent px-3 py-2 text-sm outline-none transition-[background-color,color,border-color] motion-safe:duration-200 focus:bg-accent/60 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:border-border data-[state=checked]:bg-accent/80 data-[state=checked]:text-foreground',
       className,
     )}
     {...props}
diff --git a/website/src/index.css b/website/src/index.css
index ffef70e..2fcaeb1 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -13,6 +13,18 @@ body {
   background: #000;
   font-family: "JetBrains Mono", "Geist Mono", "SF Mono", "Consolas", monospace;
   color: #f5f5f5;
+  touch-action: manipulation;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 .glass-panel {
