Week 02Design system tokens
OKLCH roles, fluid type, spacing variables, borders, focus states, and theme contracts remain the visual source of truth.
Week 07 · High-Performance Micro-Interactions & CSS Scroll-Driven Animations
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.
Weeks 02 through 06 remain frozen checkpoints. Week 07 adds motion as progressive enhancement without replacing the approved dashboard foundation.
Week 02OKLCH roles, fluid type, spacing variables, borders, focus states, and theme contracts remain the visual source of truth.
Week 03The command header, left rail, market workspace, context drawer, and status footer remain structurally intact.
Week 04The six-card market workspace and featured two-by-two market story remain preserved.
Week 05The reset, base, layout, and components layers plus native nesting remain the local stylesheet architecture.
Week 06The reusable market brief still chooses stacked or horizontal internals from its direct container width.
Week 07Focus, hover, active, reading-progress, and viewport-entry feedback now run through native CSS with a reduced-motion fallback.
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 previewFeatured market overview
The Week 04 asymmetric hierarchy remains in place while Week 07 layers CSS-only interaction feedback and scroll-driven enhancement around the preserved content.
Stocks
Crypto
Portfolio
Comparison
Risk context
Fibonacci · Volume Profile · OBV · Pivot Points · Support/Resistance · Candlestick Patterns · Divergence · Ichimoku · Parabolic SAR
Wide placement · main workspace
At 500px or wider this reusable card becomes a horizontal composition, with the visual beside the copy.
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 + opacityHover and active states use small translations/scales and opacity/shadow changes instead of animating layout dimensions or offsets.
:focus-visibleLinks, buttons, and inputs receive a high-contrast ring driven by the semantic --accent token whether motion is enabled or disabled.
animation-timelineCSS keyframes can be driven by scrolling rather than a JavaScript scroll event or a time-based document timeline.
scroll(root)A fixed top-edge bar scales from zero to full width according to document scroll progress using only a transform.
view()Cards fade and translate upward as their own visibility progresses through the nearest scroll container.
prefers-reduced-motionAll 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;
}
}
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.
:focus-visible ring using --accent.transform, opacity, border, and shadow feedback rather than animated width, height, margin, or positional offsets.animation-timeline: scroll(root) with no local JavaScript scroll listener.animation-timeline: view(); in a non-supporting browser, verify the same cards remain statically visible.Week 07 adds presentation feedback only. It does not add live prices, broker actions, production feeds, authentication, order entry, or JavaScript scroll observers/listeners.