diff --git a/crates/hypercolor-ui/input.css b/crates/hypercolor-ui/input.css
index d9056976e..2cea587d6 100644
--- a/crates/hypercolor-ui/input.css
+++ b/crates/hypercolor-ui/input.css
@@ -2,6 +2,54 @@
 @import "./tokens/primitives.css";
 @import "./tokens/semantic.css";
 
+/* Studio keeps live surfaces mounted. Motion follows selection and
+   disclosure state without interpolating pointer-driven geometry. */
+.studio-tab-indicator {
+    transition: transform 200ms var(--ease-silk), width 200ms var(--ease-silk);
+}
+
+.studio-workspace[data-switch="1"] .studio-zone-content {
+    animation: studio-settle-a 160ms var(--ease-silk);
+}
+.studio-workspace[data-switch="2"] .studio-zone-content {
+    animation: studio-settle-b 160ms var(--ease-silk);
+}
+@keyframes studio-settle-a { from { opacity: 0.65; } to { opacity: 1; } }
+@keyframes studio-settle-b { from { opacity: 0.65; } to { opacity: 1; } }
+
+.studio-workspace[data-dragging="true"] .studio-zone-content {
+    animation: none;
+}
+
+.studio-disclosure {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 200ms var(--ease-silk), opacity 160ms var(--ease-silk);
+}
+.studio-disclosure[data-open="true"] {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.studio-composition-panel,
+.studio-device-drawer {
+    transition: translate 240ms var(--ease-silk);
+}
+.studio-composition-scrim {
+    transition: opacity 200ms var(--ease-silk);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .studio-workspace[data-switch] .studio-zone-content { animation: none; }
+    .studio-tab-indicator,
+    .studio-disclosure,
+    .studio-composition-panel,
+    .studio-composition-scrim,
+    .studio-device-drawer,
+    .studio-workspace [aria-expanded] svg { transition: none; }
+}
+
 /* ── Toasts ──────────────────────────────────────────────────────────────
 
    Toasts float at the bottom right of the content area, clear of the
diff --git a/crates/hypercolor-ui/src/pages/studio/composition_panel.rs b/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
index e92ea6f74..7d94a1423 100644
--- a/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
+++ b/crates/hypercolor-ui/src/pages/studio/composition_panel.rs
@@ -9,6 +9,7 @@ use hypercolor_leptos_ext::events::target_is_text_entry;
 use leptos::ev;
 use leptos::prelude::*;
 use leptos_icons::Icon;
+use wasm_bindgen::JsCast;
 
 use crate::api;
 use crate::components::layer_panel::LayerPanel;
@@ -18,6 +19,9 @@ use super::StudioContext;
 use super::face_composition::{DefaultFaceCard, ScreenCompositionSection};
 use super::surface::selected_screen_device_id;
 
+pub(super) const COMPOSITION_PANEL_ID: &str = "studio-composition-panel";
+pub(super) const COMPOSITION_TRIGGER_ID: &str = "studio-composition-trigger";
+
 /// The right-edge composition slide-over. Stays mounted and animates via
 /// a transform; `inert` while closed keeps its controls out of the tab
 /// order. Positioned `absolute` inside the Stage pane so it overlays the
@@ -33,6 +37,43 @@ pub fn CompositionPanel(
 ) -> impl IntoView {
     let studio = expect_context::<StudioContext>();
     let open = studio.composition_open;
+    let panel_ref = NodeRef::<leptos::html::Aside>::new();
+    let close_ref = NodeRef::<leptos::html::Button>::new();
+
+    // Focus follows the disclosure without stealing it back from a control
+    // elsewhere in Studio when the panel closes.
+    Effect::new(move |previous: Option<bool>| {
+        let is_open = open.get();
+        if is_open && previous == Some(false) {
+            request_animation_frame(move || {
+                if open.try_get_untracked() == Some(true)
+                    && let Some(button) = close_ref.try_get_untracked().flatten()
+                {
+                    let options = web_sys::FocusOptions::new();
+                    options.set_prevent_scroll(true);
+                    let _ = button.focus_with_options(&options);
+                }
+            });
+        }
+        is_open
+    });
+    let close = move || {
+        let focused_in_panel = panel_ref.get_untracked().is_some_and(|panel| {
+            document()
+                .active_element()
+                .is_some_and(|active| panel.contains(Some(&active)))
+        });
+        if focused_in_panel
+            && let Some(trigger) = document()
+                .get_element_by_id(COMPOSITION_TRIGGER_ID)
+                .and_then(|element| element.dyn_into::<web_sys::HtmlElement>().ok())
+        {
+            let options = web_sys::FocusOptions::new();
+            options.set_prevent_scroll(true);
+            let _ = trigger.focus_with_options(&options);
+        }
+        open.set(false);
+    };
 
     // A Screen surface's backing display device — present only while the
     // selection is a display-role zone with a bound target. Drives the
@@ -49,32 +90,36 @@ pub fn CompositionPanel(
     let keydown = window_event_listener(ev::keydown, move |event| {
         if open.get_untracked() && event.key() == "Escape" && !target_is_text_entry(event.target())
         {
-            open.set(false);
+            close();
         }
     });
     on_cleanup(move || keydown.remove());
 
     view! {
         <div
-            class="absolute inset-0 z-30 bg-black/45 backdrop-blur-sm transition-opacity duration-200 ease-out"
+            class="studio-composition-scrim absolute inset-0 z-30 bg-black/45"
             class=("opacity-0", move || !open.get())
             class=("pointer-events-none", move || !open.get())
-            on:click=move |_| open.set(false)
+            on:click=move |_| close()
+            aria-hidden="true"
         />
         <aside
-            class="absolute inset-y-0 right-0 z-40 flex w-[420px] max-w-[88%] flex-col
-                   border-l border-edge-subtle bg-surface-base/95 backdrop-blur-md
-                   transition-transform duration-200 ease-out"
+            node_ref=panel_ref
+            id=COMPOSITION_PANEL_ID
+            aria-label="Composition"
+            aria-hidden=move || (!open.get()).to_string()
+            class="studio-composition-panel absolute inset-y-0 right-0 z-40 flex w-[420px] max-w-[88%] flex-col
+                   border-l border-edge-subtle bg-surface-base"
             class=("translate-x-full", move || !open.get())
-            style="box-shadow: -20px 0 52px -28px rgba(0, 0, 0, 0.75)"
-            inert=move || !open.get()
+            inert=move || (!open.get()).then_some("")
         >
             <div class="flex shrink-0 justify-end border-b border-edge-subtle/55 px-3 py-2">
                 <button
+                    node_ref=close_ref
                     type="button"
-                    class="flex h-6 w-6 items-center justify-center rounded-md text-fg-tertiary transition-all btn-press hover:bg-surface-hover/40 hover:text-fg-primary"
+                    class="flex h-6 w-6 items-center justify-center rounded-md text-fg-tertiary btn-press hover:bg-surface-hover/40 hover:text-fg-primary"
                     title="Close the composition panel"
-                    on:click=move |_| open.set(false)
+                    on:click=move |_| close()
                 >
                     <Icon icon=LuX width="14px" height="14px" />
                 </button>
diff --git a/crates/hypercolor-ui/src/pages/studio/device_card.rs b/crates/hypercolor-ui/src/pages/studio/device_card.rs
index 18c96d90f..f57947869 100644
--- a/crates/hypercolor-ui/src/pages/studio/device_card.rs
+++ b/crates/hypercolor-ui/src/pages/studio/device_card.rs
@@ -281,6 +281,7 @@ pub fn StudioDeviceCard(
         .collect();
     let show_components = total_components > 1;
     let channels_open = RwSignal::new(mode == CardMode::Placed);
+    let channels_id = format!("studio-channels-{zone_key}-{row_device_id}");
 
     // What the card moves as a whole, then each channel it lists, for the
     // drag and its "Move to" menu.
@@ -566,6 +567,7 @@ pub fn StudioDeviceCard(
                                         class="flex w-full items-center gap-1.5 border-t px-2.5 py-1 text-left text-[10px] text-fg-tertiary/80 transition-colors hover:text-fg-secondary"
                                         style=list_style.clone()
                                         aria-expanded=move || channels_open.get().to_string()
+                                        aria-controls=channels_id.clone()
                                         on:click=move |_| channels_open.update(|open| *open = !*open)
                                     >
                                         <Icon
@@ -573,6 +575,7 @@ pub fn StudioDeviceCard(
                                             width="10px"
                                             height="10px"
                                             {..}
+                                            class="transition-transform duration-200"
                                             class=("rotate-90", move || channels_open.get())
                                         />
                                         {format!("{channel_count} channels")}
@@ -580,10 +583,14 @@ pub fn StudioDeviceCard(
                                 }
                             })}
                         <div
-                            class="space-y-0.5 border-t px-1.5 py-1.5"
-                            class=("hidden", move || !channels_open.get())
-                            style=list_style.clone()
+                            id=channels_id.clone()
+                            class="studio-disclosure"
+                            data-open=move || channels_open.get().to_string()
+                            inert=move || (!channels_open.get()).then_some("")
+                            aria-hidden=move || (!channels_open.get()).to_string()
                         >
+                            <div class="min-h-0 overflow-hidden">
+                                <div class="space-y-0.5 border-t px-1.5 py-1.5" style=list_style.clone()>
                             {component_rows
                                 .into_iter()
                                 .map(|row| {
@@ -598,6 +605,8 @@ pub fn StudioDeviceCard(
                                     )
                                 })
                                 .collect_view()}
+                                </div>
+                            </div>
                         </div>
                     }
                 })}
diff --git a/crates/hypercolor-ui/src/pages/studio/device_pane.rs b/crates/hypercolor-ui/src/pages/studio/device_pane.rs
index 5e91ecd7b..4694aebd3 100644
--- a/crates/hypercolor-ui/src/pages/studio/device_pane.rs
+++ b/crates/hypercolor-ui/src/pages/studio/device_pane.rs
@@ -223,7 +223,7 @@ pub fn DevicePane() -> impl IntoView {
             on:touchmove=move |ev| drag.on_touch_move(&ev)
         >
             <PaneSearch search=search on_screens=on_screens />
-            <div class="scrollbar-none flex-1 overflow-y-auto px-3 pb-3" data-pane-scroll="">
+            <div class="studio-zone-content scrollbar-none flex-1 overflow-y-auto px-3 pb-3" data-pane-scroll="">
                 {move || {
                     if on_screens.get() {
                         return view! { <ScreenList query=query /> }.into_any();
@@ -514,7 +514,13 @@ fn OtherZoneRow(
                     {count}
                 </span>
             </button>
-            <Show when=move || expanded.get()>
+            <div
+                class="studio-disclosure"
+                data-open=move || expanded.get().to_string()
+                inert=move || (!expanded.get()).then_some("")
+                aria-hidden=move || (!expanded.get()).to_string()
+            >
+                <div class="min-h-0 overflow-hidden">
                 <div
                     id=list_id.clone()
                     class="space-y-0.5 border-t border-edge-subtle/40 bg-surface-sunken/50 px-1.5 py-1.5"
@@ -539,7 +545,8 @@ fn OtherZoneRow(
                             .into_any()
                     }}
                 </div>
-            </Show>
+                </div>
+            </div>
         </div>
     }
 }
diff --git a/crates/hypercolor-ui/src/pages/studio/drag.rs b/crates/hypercolor-ui/src/pages/studio/drag.rs
index 80a2ef286..358a1fed4 100644
--- a/crates/hypercolor-ui/src/pages/studio/drag.rs
+++ b/crates/hypercolor-ui/src/pages/studio/drag.rs
@@ -45,7 +45,7 @@ use crate::style_utils::device_accent_colors;
 use super::StudioContext;
 use super::drag_model::{
     CANCELLED_ANNOUNCEMENT, DragSource, DropTarget, MovePayload, SpringLoad, SpringPhase,
-    action_hint, opened_announcement, resolve_drop, springs,
+    action_hint, ghost_position, opened_announcement, resolve_drop, springs,
 };
 use super::move_menu::{MoveMenuAnchor, MoveMenuHost};
 use super::moves::{canvas_payload, perform, zone_name};
@@ -810,11 +810,9 @@ impl DragController {
     }
 }
 
-/// Where the ghost sits for a pointer at `(x, y)`: below and right of it,
-/// flipping to the other side near the window's right or bottom edge.
+/// The preview follows the pointer directly, then holds against the viewport
+/// edge. Its fixed footprint keeps target hints from shifting its position.
 fn ghost_transform((x, y): (f64, f64)) -> String {
-    const ROOM_X: f64 = 290.0;
-    const ROOM_Y: f64 = 72.0;
     let window = window();
     let extent = |value: Result<wasm_bindgen::JsValue, wasm_bindgen::JsValue>| {
         value
@@ -823,17 +821,8 @@ fn ghost_transform((x, y): (f64, f64)) -> String {
             .unwrap_or(f64::MAX)
     };
     let (width, height) = (extent(window.inner_width()), extent(window.inner_height()));
-    let (dx, shift_x) = if x + ROOM_X > width {
-        (x - 14.0, "-100%")
-    } else {
-        (x + 14.0, "0")
-    };
-    let (dy, shift_y) = if y + ROOM_Y > height {
-        (y - 12.0, "-100%")
-    } else {
-        (y + 12.0, "0")
-    };
-    format!("transform: translate({dx:.0}px, {dy:.0}px) translate({shift_x}, {shift_y})")
+    let (left, top) = ghost_position((x, y), (width, height), (240.0, 48.0));
+    format!("transform: translate3d({left:.2}px, {top:.2}px, 0)")
 }
 
 /// The device pane's scrolling list.
@@ -861,12 +850,12 @@ pub(crate) fn DragLayer() -> impl IntoView {
             })
             .map(|action| action_hint(&action, |id| zone_name(studio, id)))
     });
-    // The ghost mounts once per drag; only its hint line follows the
-    // target, so it does not replay its entrance on every target change.
-    let ghost = Memo::new(move |_| {
-        let payload = drag.payload.get()?;
-        // A box dragged on its own canvas is its own ghost.
-        (payload.source != DragSource::Canvas || hint.with(Option::is_some)).then_some(payload)
+    let ghost_visible = Memo::new(move |_| {
+        drag.payload.with(|payload| {
+            payload.as_ref().is_some_and(|payload| {
+                payload.source != DragSource::Canvas || hint.with(Option::is_some)
+            })
+        })
     });
     let canvas_look = Memo::new(move |_| {
         let rect = drag.canvas_rect.get()?;
@@ -881,44 +870,34 @@ pub(crate) fn DragLayer() -> impl IntoView {
         <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
             {move || drag.announcement.get()}
         </div>
-        {move || {
-            canvas_look
-                .get()
-                .map(|((left, top, width, height), look)| {
-                    let over = look == DropLook::Over;
-                    view! {
-                        <div
-                            class="pointer-events-none fixed z-[60] rounded-lg border-2 transition-colors duration-150"
-                            class=("border-accent", over)
-                            class=("bg-accent/10", over)
-                            class=("border-accent/50", !over)
-                            class=("border-dashed", !over)
-                            style=format!(
-                                "left: {left:.0}px; top: {top:.0}px; width: {width:.0}px; height: {height:.0}px",
-                            )
-                        >
-                            {move || {
-                                drag.canvas_point
-                                    .get()
-                                    .map(|point| {
-                                        view! {
-                                            <span
-                                                class="absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-surface-base"
-                                                style=format!(
-                                                    "left: {:.2}%; top: {:.2}%",
-                                                    point.x * 100.0,
-                                                    point.y * 100.0,
-                                                )
-                                            />
-                                        }
-                                    })
-                            }}
-                        </div>
-                    }
+        <Show when=move || canvas_look.with(Option::is_some)>
+            <div
+                data-studio-drop-preview=""
+                class="pointer-events-none fixed z-[60] rounded-lg border-2 transition-colors duration-150 motion-reduce:transition-none"
+                class=("border-accent", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look == DropLook::Over)))
+                class=("bg-accent/10", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look == DropLook::Over)))
+                class=("border-accent/40", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look != DropLook::Over)))
+                class=("border-dashed", move || canvas_look.with(|look| look.is_some_and(|(_, look)| look != DropLook::Over)))
+                style=move || canvas_look.with(|look| {
+                    look.map(|((left, top, width, height), _)| format!(
+                        "left: {left:.2}px; top: {top:.2}px; width: {width:.2}px; height: {height:.2}px",
+                    )).unwrap_or_default()
                 })
-        }}
+                aria-hidden="true"
+            >
+                <span
+                    data-studio-drop-point=""
+                    class="absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-accent bg-surface-base transition-opacity duration-150 motion-reduce:transition-none"
+                    class=("opacity-0", move || drag.canvas_point.with(Option::is_none))
+                    style=move || {
+                        let point = drag.canvas_point.get().unwrap_or(NormalizedPosition::new(0.5, 0.5));
+                        format!("left: {:.2}%; top: {:.2}%", point.x * 100.0, point.y * 100.0)
+                    }
+                />
+            </div>
+        </Show>
         {move || {
-            ghost
+            drag.payload
                 .get()
                 .map(|payload| {
                     let (primary, secondary) = device_accent_colors(&payload.device_id);
@@ -927,27 +906,25 @@ pub(crate) fn DragLayer() -> impl IntoView {
                     );
                     view! {
                         <div
-                            class="pointer-events-none fixed left-0 top-0 z-[80]"
+                            data-studio-drag-ghost=""
+                            class="pointer-events-none fixed left-0 top-0 z-[80] h-12 w-[240px] max-w-[calc(100vw-16px)] transition-opacity duration-150 motion-reduce:transition-none"
+                            class=("opacity-0", move || !ghost_visible.get())
                             style=move || ghost_transform(drag.pointer.get())
                             aria-hidden="true"
                         >
-                            <div class="flex max-w-[260px] items-center gap-2 rounded-lg border border-edge-subtle bg-surface-overlay/98 py-1.5 pl-2 pr-2.5 backdrop-blur-xl dropdown-glow animate-enter-scale">
+                            <div class="flex h-full items-center gap-2 rounded-lg border border-edge-subtle bg-surface-overlay py-1.5 pl-2 pr-2.5 dropdown-glow animate-enter-fade">
                                 <span class="h-7 w-1 shrink-0 rounded-full" style=strip />
-                                <div class="min-w-0">
+                                <div class="min-w-0 flex-1">
                                     <div class="truncate text-[12px] font-medium text-fg-primary">
                                         {payload.label.clone()}
                                     </div>
-                                    {move || {
-                                        hint.get()
-                                            .map(|hint| {
-                                                view! {
-                                                    <div class="flex items-center gap-1 text-[10px] text-fg-tertiary">
-                                                        <Icon icon=LuChevronRight width="10px" height="10px" />
-                                                        <span class="truncate">{hint}</span>
-                                                    </div>
-                                                }
-                                            })
-                                    }}
+                                    <div
+                                        class="flex h-4 items-center gap-1 text-[10px] text-fg-tertiary transition-opacity duration-150 motion-reduce:transition-none"
+                                        class=("opacity-0", move || hint.with(Option::is_none))
+                                    >
+                                        <Icon icon=LuChevronRight width="10px" height="10px" />
+                                        <span class="truncate">{move || hint.get().unwrap_or_default()}</span>
+                                    </div>
                                 </div>
                                 {payload.badge().map(|count| {
                                     view! {
diff --git a/crates/hypercolor-ui/src/pages/studio/drag_model.rs b/crates/hypercolor-ui/src/pages/studio/drag_model.rs
index 373a0e1d9..8b6f43f0f 100644
--- a/crates/hypercolor-ui/src/pages/studio/drag_model.rs
+++ b/crates/hypercolor-ui/src/pages/studio/drag_model.rs
@@ -9,6 +9,22 @@
 
 use hypercolor_types::spatial::NormalizedPosition;
 
+/// Place a drag preview near the pointer while keeping it inside the viewport.
+/// Clamping instead of flipping sides keeps its travel continuous at an edge.
+#[must_use]
+pub fn ghost_position(pointer: (f64, f64), viewport: (f64, f64), size: (f64, f64)) -> (f64, f64) {
+    const INSET: f64 = 8.0;
+    let axis = |pointer: f64, extent: f64, size: f64, offset: f64| {
+        let available = (extent - INSET * 2.0).max(0.0);
+        let end = (extent - size.min(available) - INSET).max(INSET);
+        (pointer + offset).clamp(INSET, end)
+    };
+    (
+        axis(pointer.0, viewport.0, size.0, 14.0),
+        axis(pointer.1, viewport.1, size.1, 12.0),
+    )
+}
+
 /// Where the moving outputs live before the move.
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub enum Origin {
diff --git a/crates/hypercolor-ui/src/pages/studio/mod.rs b/crates/hypercolor-ui/src/pages/studio/mod.rs
index 65411189c..075737dc9 100644
--- a/crates/hypercolor-ui/src/pages/studio/mod.rs
+++ b/crates/hypercolor-ui/src/pages/studio/mod.rs
@@ -548,6 +548,18 @@ fn StudioWorkspace() -> impl IntoView {
     }));
     on_cleanup(move || history.attach_announcer(None));
     let dragging = Memo::new(move |_| drag.payload.with(Option::is_some));
+    // Restart the short content settle only for a different tab. Scene
+    // refreshes and repeated clicks keep the live canvas undisturbed.
+    let content_switch = RwSignal::new(0_u8);
+    Effect::new(move |previous: Option<Option<String>>| {
+        let selected = selected_surface_id.get();
+        if dragging.get() {
+            content_switch.set(0);
+        } else if previous.is_some_and(|previous| previous != selected) {
+            content_switch.update(|phase| *phase = if *phase == 1 { 2 } else { 1 });
+        }
+        selected
+    });
 
     let on_screens = Memo::new(move |_| {
         let selected = selected_surface_id.get();
@@ -569,7 +581,9 @@ fn StudioWorkspace() -> impl IntoView {
     view! {
         <div
             node_ref=root_ref
-            class="flex h-full flex-col overflow-hidden"
+            class="studio-workspace flex h-full flex-col overflow-hidden"
+            data-switch=move || content_switch.get().to_string()
+            data-dragging=move || dragging.get().to_string()
             class=("cursor-grabbing", move || dragging.get())
             class=("select-none", move || dragging.get())
             on:pointermove=move |ev| drag.on_move(&ev)
@@ -621,7 +635,7 @@ fn StudioWorkspace() -> impl IntoView {
                     // deliberately covers the bar instead of stacking above
                     // it. Keep bracket class syntax out of comments; the
                     // Tailwind scanner reads them and emits dead rules.
-                    class="w-80 shrink-0 overflow-hidden lg:w-[var(--pane-w)] max-lg:fixed max-lg:inset-y-0 max-lg:left-0 max-lg:z-[45] max-lg:border-r max-lg:border-edge-subtle/70 max-lg:transition-transform max-lg:duration-200 max-md:pb-[env(safe-area-inset-bottom)]"
+                    class="studio-device-drawer w-80 shrink-0 overflow-hidden lg:w-[var(--pane-w)] max-lg:fixed max-lg:inset-y-0 max-lg:left-0 max-lg:z-[45] max-lg:border-r max-lg:border-edge-subtle/70 max-md:pb-[env(safe-area-inset-bottom)]"
                     class=("max-lg:-translate-x-full", move || !pane_drawer.get())
                     style:--pane-w=move || format!("{}px", pane_width.get())
                 >
@@ -640,7 +654,7 @@ fn StudioWorkspace() -> impl IntoView {
                         on_drag_end=Callback::new(|()| {})
                     />
                 </div>
-                <div class="relative min-w-0 flex-1">
+                <div class="relative min-w-0 flex-1 overflow-hidden">
                     <ZoneLayoutProvider
                         selected_zone_id=selected_surface_id
                         refresh_scene=refresh_scene
diff --git a/crates/hypercolor-ui/src/pages/studio/stage.rs b/crates/hypercolor-ui/src/pages/studio/stage.rs
index c9c24d53d..1d19ccdd9 100644
--- a/crates/hypercolor-ui/src/pages/studio/stage.rs
+++ b/crates/hypercolor-ui/src/pages/studio/stage.rs
@@ -27,6 +27,7 @@ use crate::display_utils::display_preview_shell_url;
 use crate::icons::*;
 use crate::ws::messages::zone_has_degraded_layer;
 
+use super::composition_panel::{COMPOSITION_PANEL_ID, COMPOSITION_TRIGGER_ID};
 use super::surface::{Surface, SurfaceKind, layer_label, now_playing, surfaces_from_zones};
 use super::{StudioContext, hidden_outputs_storage_key};
 
@@ -183,7 +184,7 @@ pub fn Stage() -> impl IntoView {
         Signal::derive(move || selected_display.get().map(|display| display.rotation));
 
     view! {
-        <div class="flex h-full flex-col bg-surface-sunken/20">
+        <div class="studio-zone-content flex h-full flex-col bg-surface-sunken/20">
             <div class="flex items-center justify-between gap-3 border-b border-edge-subtle/60 px-5 py-3">
                 <NowPlayingChip surface=selected_surface />
                 {move || {
@@ -420,23 +421,26 @@ fn NowPlayingChip(#[prop(into)] surface: Signal<Option<Surface>>) -> impl IntoVi
     view! {
         <button
             type="button"
+            id=COMPOSITION_TRIGGER_ID
+            aria-controls=COMPOSITION_PANEL_ID
+            aria-expanded=move || studio.composition_open.get().to_string()
             class="group flex items-center gap-2 rounded-lg border border-edge-subtle/60 bg-surface-overlay/40 px-3 py-1.5 transition-colors hover:border-accent-muted hover:bg-surface-overlay/70"
-            title="Open the composition panel"
+            title=move || if studio.composition_open.get() { "Close the composition panel" } else { "Open the composition panel" }
             on:click=move |_| studio.composition_open.update(|open| *open = !*open)
         >
             <Icon
                 icon=LuLayers
                 width="13px"
                 height="13px"
-                style="color: rgba(225, 53, 255, 0.75)"
+                {..}
+                class="text-accent/75"
             />
             <span class="max-w-[200px] truncate text-[12px] font-medium text-fg-secondary group-hover:text-fg-primary">
                 {label}
             </span>
             <Show when=is_default_face>
                 <span
-                    class="rounded-full border px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.14em]"
-                    style="border-color: rgba(225, 53, 255, 0.35); color: rgba(225, 53, 255, 0.85)"
+                    class="rounded-full border border-accent/35 px-1.5 py-px text-[9px] font-semibold uppercase tracking-[0.14em] text-accent/85"
                     title="The display's default face, shown in every scene without its own face layer"
                 >
                     "Default"
@@ -446,7 +450,9 @@ fn NowPlayingChip(#[prop(into)] surface: Signal<Option<Surface>>) -> impl IntoVi
                 icon=LuChevronRight
                 width="12px"
                 height="12px"
-                style="color: rgba(139, 133, 160, 0.55)"
+                {..}
+                class="text-fg-tertiary/55 transition-transform duration-200"
+                class=("rotate-180", move || studio.composition_open.get())
             />
         </button>
     }
diff --git a/crates/hypercolor-ui/src/pages/studio/zone_strip.rs b/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
index a21b1c999..149881ebf 100644
--- a/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
+++ b/crates/hypercolor-ui/src/pages/studio/zone_strip.rs
@@ -392,13 +392,57 @@ pub fn ZoneStrip() -> impl IntoView {
 
     let has_screens = Memo::new(move |_| !screen_ids.with(Vec::is_empty));
     let screen_count = Memo::new(move |_| screen_ids.with(Vec::len));
+    let indicator = RwSignal::new(None::<(f64, f64)>);
+    Effect::new(move |_| {
+        studio.selected_surface_id.track();
+        on_screens.track();
+        visible_ids.track();
+        lights.track();
+        strip_width.track();
+        strip_ref.track();
+        // Measure after keyed tabs and overflow have committed their DOM.
+        request_animation_frame(move || {
+            let Some(strip) = strip_ref.try_get_untracked().flatten() else {
+                return;
+            };
+            let Some(selected) = studio.selected_surface_id.try_get_untracked() else {
+                return;
+            };
+            let dom_id = active_tab_dom_id(
+                selected.as_deref(),
+                on_screens.try_get_untracked().unwrap_or(false),
+            );
+            let geometry = dom_id
+                .and_then(|id| document().get_element_by_id(&id))
+                .and_then(|tab| tab.parent_element())
+                .map(|tab| {
+                    let rect = tab.get_bounding_client_rect();
+                    let origin = strip.get_bounding_client_rect();
+                    (
+                        rect.left() - origin.left() + 8.0,
+                        (rect.width() - 16.0).max(0.0),
+                    )
+                });
+            indicator.try_set(geometry);
+        });
+    });
 
     view! {
         <div
             node_ref=strip_ref
-            class="flex h-full min-w-0 flex-1 items-end gap-1 self-stretch"
+            class="relative flex h-full min-w-0 flex-1 items-end gap-1 self-stretch"
             on:keydown=on_keydown
         >
+            <Show when=move || indicator.with(Option::is_some)>
+                <span
+                    class="studio-tab-indicator pointer-events-none absolute bottom-0 left-0 z-10 h-0.5 rounded-full bg-accent"
+                    aria-hidden="true"
+                    style=move || {
+                        let (left, width) = indicator.get().unwrap_or_default();
+                        format!("transform: translateX({left}px); width: {width}px")
+                    }
+                />
+            </Show>
             <div
                 node_ref=handles.tabs_ref
                 role="tablist"
@@ -450,9 +494,6 @@ pub fn ZoneStrip() -> impl IntoView {
                     class=("hover:bg-surface-hover/30", move || !on_screens.get())
                     class=("hover:text-fg-secondary", move || !on_screens.get())
                 >
-                    <Show when=move || on_screens.get()>
-                        <span class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />
-                    </Show>
                     <button
                         type="button"
                         role="tab"
@@ -728,9 +769,6 @@ fn ZoneTab(zone_id: String, handles: StripHandles) -> impl IntoView {
             class=("ring-accent", move || drop_look.get() == DropLook::Over)
             class=("bg-accent/10", move || drop_look.get() == DropLook::Over)
         >
-            <Show when=move || is_active.get()>
-                <span class="pointer-events-none absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />
-            </Show>
             {tab_view}
             // Holding a drag here opens the tab when the ring fills.
             <Show when=move || springing.get()>
diff --git a/crates/hypercolor-ui/tests/studio_drag_model_tests.rs b/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
index 393856a87..10dd4d834 100644
--- a/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
+++ b/crates/hypercolor-ui/tests/studio_drag_model_tests.rs
@@ -5,14 +5,62 @@ use hypercolor_types::spatial::NormalizedPosition;
 
 use hypercolor_ui::pages::studio::drag_model::{
     CANCELLED_ANNOUNCEMENT, DragSource, DropAction, DropTarget, MovePayload, Origin, SpringLoad,
-    SpringPhase, action_hint, channel_label, moved_announcement, new_zone_announcement,
-    opened_announcement, origin_name, placed_announcement, resolve_drop, springs,
-    zone_name_for_device,
+    SpringPhase, action_hint, channel_label, ghost_position, moved_announcement,
+    new_zone_announcement, opened_announcement, origin_name, placed_announcement, resolve_drop,
+    springs, zone_name_for_device,
 };
 
 const MAIN: &str = "main";
 const KEYS: &str = "keyboard";
 
+#[test]
+fn ghost_tracks_pointer_until_it_reaches_the_viewport_inset() {
+    let viewport = (1024.0, 768.0);
+    let size = (240.0, 48.0);
+    assert_eq!(
+        ghost_position((100.0, 200.0), viewport, size),
+        (114.0, 212.0)
+    );
+    assert_eq!(
+        ghost_position((1024.0, 768.0), viewport, size),
+        (776.0, 712.0)
+    );
+    assert_eq!(ghost_position((-30.0, -30.0), viewport, size), (8.0, 8.0));
+}
+
+#[test]
+fn ghost_never_jumps_when_crossing_an_edge_threshold_in_either_direction() {
+    let viewport = (1024.0, 768.0);
+    let size = (240.0, 48.0);
+    let mut previous = ghost_position((0.0, 0.0), viewport, size);
+    for step in 1..1200 {
+        let point = f64::from(step);
+        let current = ghost_position((point, point), viewport, size);
+        assert!((0.0..=1.0).contains(&(current.0 - previous.0)));
+        assert!((0.0..=1.0).contains(&(current.1 - previous.1)));
+        previous = current;
+    }
+    for step in (0..1200).rev() {
+        let point = f64::from(step);
+        let current = ghost_position((point, point), viewport, size);
+        assert!((-1.0..=0.0).contains(&(current.0 - previous.0)));
+        assert!((-1.0..=0.0).contains(&(current.1 - previous.1)));
+        previous = current;
+    }
+}
+
+#[test]
+fn ghost_accounts_for_a_preview_narrowed_to_fit_a_small_viewport() {
+    assert_eq!(
+        ghost_position((180.0, 100.0), (200.0, 160.0), (240.0, 48.0)),
+        (8.0, 104.0)
+    );
+    assert_eq!(
+        ghost_position((0.0, 0.0), (0.0, 0.0), (240.0, 48.0)),
+        (8.0, 8.0)
+    );
+}
+
 fn point(x: f32, y: f32) -> NormalizedPosition {
     NormalizedPosition::new(x, y)
 }
diff --git a/e2e/tests/studio-history-fixture.mjs b/e2e/tests/studio-history-fixture.mjs
index 65f5d434f..0d9d2fda0 100644
--- a/e2e/tests/studio-history-fixture.mjs
+++ b/e2e/tests/studio-history-fixture.mjs
@@ -66,6 +66,12 @@ export async function openHistory(page, { placedStand = false, offline = false,
       if (path === "/api/v1/layouts") {
         return route.fulfill({ json: envelope({ items: [], total: 0 }), headers: daemonHeaders(scene) });
       }
+      if (path === "/api/v1/layouts/active") {
+        return route.fulfill({ json: envelope({
+          id: "fixture-rig", name: "Fixture rig", description: null,
+          canvas_width: 640, canvas_height: 480, zones: [], version: 1,
+        }), headers: daemonHeaders(scene) });
+      }
       return route.continue();
     }
     const body = request.postDataJSON();
diff --git a/e2e/tests/studio-motion.spec.mjs b/e2e/tests/studio-motion.spec.mjs
new file mode 100644
index 000000000..cb4b3e960
--- /dev/null
+++ b/e2e/tests/studio-motion.spec.mjs
@@ -0,0 +1,134 @@
+import { test, expect } from "@playwright/test";
+import { openHistory, FIRST, SECOND } from "./studio-history-fixture.mjs";
+
+const tab = (page, id) => page.locator(`#zone-tab-${id}`);
+
+test("Studio keeps its canvas and tab geometry through rapid selection", async ({ page }) => {
+  await openHistory(page);
+  await expect(page.locator(".studio-tab-indicator")).toBeVisible();
+  await page.evaluate(() => {
+    window.motionCanvas = document.querySelector("[data-studio-canvas]");
+    window.motionIndicator = document.querySelector(".studio-tab-indicator");
+    window.motionTabs = [...document.querySelectorAll("[data-zone-tab]")].map((el) => el.getBoundingClientRect().toJSON());
+  });
+  for (const id of [SECOND, FIRST, SECOND]) await tab(page, id).click();
+  await expect(tab(page, SECOND)).toHaveAttribute("aria-selected", "true");
+  await expect.poll(() => page.evaluate(() => {
+    const active = document.querySelector('[role="tab"][aria-selected="true"]').parentElement.getBoundingClientRect();
+    const line = document.querySelector(".studio-tab-indicator").getBoundingClientRect();
+    return Math.abs(line.left - active.left - 8) < 1 && Math.abs(line.width - active.width + 16) < 1;
+  })).toBe(true);
+  expect(await page.evaluate(() => ({
+    canvas: window.motionCanvas === document.querySelector("[data-studio-canvas]"),
+    indicator: window.motionIndicator === document.querySelector(".studio-tab-indicator"),
+    tabs: [...document.querySelectorAll("[data-zone-tab]")].every((el, i) => {
+      const rect = el.getBoundingClientRect();
+      return rect.x === window.motionTabs[i].x && rect.width === window.motionTabs[i].width;
+    }),
+  }))).toEqual({ canvas: true, indicator: true, tabs: true });
+});
+
+test("Studio disclosures keep their contents and return composition focus", async ({ page }) => {
+  await openHistory(page, { placedStand: true });
+  const disclosure = page.locator(`#pane-zone-${SECOND} .studio-disclosure`);
+  const toggle = page.locator(`#pane-zone-toggle-${SECOND}`);
+  await expect(disclosure).toHaveAttribute("inert", "");
+  await toggle.click();
+  await expect(disclosure).toHaveAttribute("data-open", "true");
+  await disclosure.evaluate((el) => { window.disclosureBody = el.firstElementChild; });
+  await toggle.click();
+  await expect(disclosure).toHaveAttribute("aria-hidden", "true");
+  await toggle.click();
+  expect(await disclosure.evaluate((el) => el.firstElementChild === window.disclosureBody)).toBe(true);
+
+  const trigger = page.locator("#studio-composition-trigger");
+  const panel = page.locator("#studio-composition-panel");
+  await trigger.click();
+  expect(await panel.evaluate((el) => getComputedStyle(el).transitionProperty)).toBe("translate");
+  await expect(trigger).toHaveAttribute("aria-expanded", "true");
+  await expect(panel.getByTitle("Close the composition panel")).toBeFocused();
+  await page.keyboard.press("Escape");
+  await expect(panel).toHaveAttribute("inert", "");
+  await expect(trigger).toBeFocused();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+
+  const frames = await trigger.evaluate(async (button) => {
+    const panel = document.querySelector("#studio-composition-panel");
+    await Promise.all(panel.getAnimations().map((animation) => animation.finished));
+    button.click();
+    const frames = [];
+    for (let frame = 0; frame < 20; frame++) {
+      await new Promise(requestAnimationFrame);
+      frames.push({ x: panel.getBoundingClientRect().x, scroll: panel.parentElement.scrollLeft });
+    }
+    return frames;
+  });
+  expect(frames.every((frame) => frame.scroll === 0)).toBe(true);
+  expect(frames.some((frame) => frame.x > frames.at(-1).x + 1 && frame.x < 1600)).toBe(true);
+});
+
+test("Studio honors reduced motion in both themes", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await openHistory(page);
+  for (const theme of ["dark", "light"]) {
+    await page.evaluate((theme) => document.documentElement.dataset.theme = theme, theme);
+    await tab(page, SECOND).click();
+    expect(await page.evaluate(() => ({
+      indicator: getComputedStyle(document.querySelector(".studio-tab-indicator")).transitionDuration,
+      panel: getComputedStyle(document.querySelector(".studio-composition-panel")).transitionDuration,
+      disclosure: getComputedStyle(document.querySelector(".studio-disclosure")).transitionDuration,
+      content: getComputedStyle(document.querySelector(".studio-zone-content")).animationName,
+    }))).toEqual({ indicator: "0s", panel: "0s", disclosure: "0s", content: "none" });
+    await tab(page, FIRST).click();
+  }
+});
+
+test("Studio drag feedback stays mounted and clamps continuously at the edge", async ({ page }) => {
+  const fixture = await openHistory(page);
+  await tab(page, SECOND).click();
+  await tab(page, FIRST).click();
+  await page.evaluate(async () => {
+    await Promise.all([...document.querySelectorAll(".studio-zone-content")].flatMap((el) => el.getAnimations().map((animation) => animation.finished)));
+    window.dragSettles = [];
+    document.addEventListener("animationstart", (event) => {
+      if (event.animationName.startsWith("studio-settle")) window.dragSettles.push(event.animationName);
+    });
+  });
+  const source = page.getByRole("button", { name: "Laptop stand 12 LEDs · Fixture", exact: true });
+  const sourceBox = await source.boundingBox();
+  await page.mouse.move(sourceBox.x + 30, sourceBox.y + 15);
+  await page.mouse.down();
+  await page.mouse.move(sourceBox.x + 50, sourceBox.y + 15);
+  const ghost = page.locator("[data-studio-drag-ghost]");
+  await expect(ghost).toBeVisible();
+  await page.evaluate(() => {
+    window.dragGhost = document.querySelector("[data-studio-drag-ghost]");
+    window.dragPreview = document.querySelector("[data-studio-drop-preview]");
+    window.dragPoint = document.querySelector("[data-studio-drop-point]");
+  });
+  const canvas = await page.locator("[data-studio-canvas]").boundingBox();
+  await page.mouse.move(canvas.x + canvas.width / 2, canvas.y + canvas.height / 2);
+  await page.mouse.move(canvas.x + canvas.width / 2 + 30, canvas.y + canvas.height / 2 + 30);
+  expect(await page.evaluate(() => ({
+    ghost: window.dragGhost === document.querySelector("[data-studio-drag-ghost]"),
+    preview: window.dragPreview === document.querySelector("[data-studio-drop-preview]"),
+    point: window.dragPoint === document.querySelector("[data-studio-drop-point]"),
+  }))).toEqual({ ghost: true, preview: true, point: true });
+  const positions = [];
+  for (const x of [1290, 1310, 1330, 1350, 1370, 1390, 1450, 1590]) {
+    await page.mouse.move(x, 650);
+    positions.push((await ghost.boundingBox()).x);
+  }
+  expect(positions.every((x, i) => i === 0 || x >= positions[i - 1])).toBe(true);
+  expect(positions.at(-1) + (await ghost.boundingBox()).width).toBeLessThanOrEqual(1592);
+  const destination = await tab(page, SECOND).boundingBox();
+  await page.mouse.move(destination.x + destination.width / 2, destination.y + destination.height / 2);
+  await expect(tab(page, SECOND)).toHaveAttribute("aria-selected", "true");
+  await expect(ghost).toBeVisible();
+  expect(await page.evaluate(() => window.dragGhost === document.querySelector("[data-studio-drag-ghost]"))).toBe(true);
+  await page.keyboard.press("Escape");
+  await page.mouse.up();
+  await expect(ghost).toHaveCount(0);
+  expect(await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(window.dragSettles)))))).toEqual([]);
+  expect(fixture.writes).toEqual([]);
+});
diff --git a/e2e/tests/studio-performance.spec.mjs b/e2e/tests/studio-performance.spec.mjs
index fec886bed..11b7d9413 100644
--- a/e2e/tests/studio-performance.spec.mjs
+++ b/e2e/tests/studio-performance.spec.mjs
@@ -5,7 +5,7 @@ import { getStack, parseFence } from "./helpers.mjs";
 const OUTPUT_COUNT = 80;
 const FIRST_ZONE = "11111111-1111-4111-8111-111111111111";
 const SECOND_ZONE = "22222222-2222-4222-8222-222222222222";
-const outputSelector = "[data-zone-id]";
+const outputSelector = "[data-studio-canvas] [data-zone-id]";
 const handleSelector = ":scope > div.w-3.h-3";
 
 function studioScene() {