Week 07 · High-Performance Micro-Interactions & CSS Scroll-Driven Animations

The preserved Trading Dashboard now responds to focus, pointer input, and scrolling without JavaScript animation listeners.

This milestone duplicates the approved Week 06 output, preserves its container-aware component system, then adds restrained transform/opacity micro-interactions, a CSS-only reading progress bar, view-timeline content reveals, and a reduced-motion shutdown path that keeps the interface fully usable as a static experience.

01

Progress preserved, interaction polish added

Weeks 02 through 06 remain frozen checkpoints. Week 07 adds motion as progressive enhancement without replacing the approved dashboard foundation.

Week 02

Design system tokens

OKLCH roles, fluid type, spacing variables, borders, focus states, and theme contracts remain the visual source of truth.

Week 03

Semantic dashboard frame

The command header, left rail, market workspace, context drawer, and status footer remain structurally intact.

Week 04

Asymmetric content hierarchy

The six-card market workspace and featured two-by-two market story remain preserved.

Week 05

Layered and nested CSS

The reset, base, layout, and components layers plus native nesting remain the local stylesheet architecture.

Week 06

Container-relative cards

The reusable market brief still chooses stacked or horizontal internals from its direct container width.

Week 07

CSS motion & scroll timelines

Focus, hover, active, reading-progress, and viewport-entry feedback now run through native CSS with a reduced-motion fallback.

02

Placement test: one component, two container widths

The adaptive card appears in both the wide market workspace and the narrow research drawer. Its internal layout changes through @container, not through a viewport media query.

Market command header

Motion-enhanced workspace preview

Featured market overview

Cross-market pulse

Layout sample

The Week 04 asymmetric hierarchy remains in place while Week 07 layers CSS-only interaction feedback and scroll-driven enhancement around the preserved content.

Track
2 columns
Depth
2 rows
Flow
Dense

Stocks

Watchlist scan

  • AAPLPrimary
  • MSFTSecondary
  • NVDACompare

Crypto

Digital asset radar

  • BTCMacro
  • ETHNetwork
  • SOLMomentum

Portfolio

Technique stack

Trend · SMA / EMA / VWAPMomentum · RSI / MACD / StochasticVolatility · Bollinger / ATR / ADX

Comparison

Relative strength

Large capBaseline
CryptoVolatile
CashDefensive

Risk context

Confluence queue

Fibonacci · Volume Profile · OBV · Pivot Points · Support/Resistance · Candlestick Patterns · Divergence · Ichimoku · Parabolic SAR

Wide placement · main workspace

Context-aware market brief

At 500px or wider this reusable card becomes a horizontal composition, with the visual beside the copy.

Week 07 CSS motion preview · Static educational content · No JavaScript scroll listener · No live market feed

03

Motion and scroll-driven enhancement contract

Week 07 keeps motion on compositor-friendly properties, keeps keyboard focus visually explicit, and treats scroll timelines as progressive enhancement rather than a requirement for reading the page.

transform + opacity

High-performance feedback

Hover and active states use small translations/scales and opacity/shadow changes instead of animating layout dimensions or offsets.

:focus-visible

Keyboard focus first

Links, buttons, and inputs receive a high-contrast ring driven by the semantic --accent token whether motion is enabled or disabled.

animation-timeline

Replace time with scroll progress

CSS keyframes can be driven by scrolling rather than a JavaScript scroll event or a time-based document timeline.

scroll(root)

Reading progress

A fixed top-edge bar scales from zero to full width according to document scroll progress using only a transform.

view()

Viewport-entry reveals

Cards fade and translate upward as their own visibility progresses through the nearest scroll container.

prefers-reduced-motion

Motion can disappear completely

All non-essential movement and transitions are disabled when the operating system requests reduced motion, leaving the same static information architecture.

@media (prefers-reduced-motion: no-preference) {
  :where(a, button, input, .market-card, .adaptive-market-card) {
    transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
  }

  @supports (animation-timeline: scroll()) {
    .scroll-progress-bar {
      animation: week07-scroll-progress auto linear both;
      animation-timeline: scroll(root);
    }

    .token-section,
    .market-card,
    .adaptive-market-card {
      animation: week07-view-reveal auto linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
}
04

Week 07 verification

The milestone is complete only when interaction feedback remains keyboard-visible, scroll effects require no JavaScript, reduced motion removes movement, and the preserved dashboard remains usable without timeline support.

  • Confirm Week 07 exists beside Week 06 and Weeks 02–06 remain unchanged historical checkpoints.
  • Use only the Tab key and confirm every interactive element receives a strong :focus-visible ring using --accent.
  • Hover and activate links/cards and confirm motion uses transform, opacity, border, and shadow feedback rather than animated width, height, margin, or positional offsets.
  • Scroll the page in a supporting browser and confirm the fixed progress bar is driven by animation-timeline: scroll(root) with no local JavaScript scroll listener.
  • Confirm cards reveal through animation-timeline: view(); in a non-supporting browser, verify the same cards remain statically visible.
  • Enable the operating system's Reduce Motion preference, refresh, and confirm movement/transition behavior shuts down while focus, reading order, and controls remain intact.
  • Use DevTools Paint Flashing and confirm pointer interactions do not trigger broad layout repainting caused by animated dimensions or offsets.
  • Switch Standard, Playful Pop, Raggedy Granite, Glossy Marble, Luminous Midnight, Gothic Stickerboard, and Baroque Plexiglas between dark and light modes and confirm the complete Week 07 page remains readable and themed.
Scope boundary

Week 07 adds presentation feedback only. It does not add live prices, broker actions, production feeds, authentication, order entry, or JavaScript scroll observers/listeners.