Tutorials
Claude Opus 5.5: Fix Product-Page Motion Without Hiding Content
Ask Claude Opus 5.5 to make the product page complete in its static state, then add motion only where it helps explain a change.
Ask Claude Opus 5.5 to make the product page complete in its static state, then add motion only where it helps explain a change. A price, specification or purchase link should not remain invisible while a scroll-triggered animation waits to run. Repair the content state first; shortening an animation does not fix hidden content when its script fails.
The following is a proposed implementation brief, not a measured Opus result. The official Opus prompting guide supports specifying an explicit output and review criteria. Supply the relevant HTML, CSS and JavaScript together so the model can see who controls visibility.
Separate three kinds of motion
| Motion | Useful purpose | Static alternative |
|---|---|---|
| Color swatch transition | Show a changed selection | Selected label and immediate image update |
| Exploded product diagram | Explain component relationships | Labeled component diagram |
| Scroll entrance | Decorative presentation | Content already visible in document order |
A web developer discussion describes frustration with content that arrives only after repeated entrance effects. That is qualitative reader feedback, not evidence that any fixed duration raises conversion rates.
Inventory each effect: trigger, affected element, initial state, final state and behavior if JavaScript fails. Look for CSS such as `opacity: 0`, off-screen transforms or height zero that remains active until an observer or timeline runs. A purchase link can be present in the DOM yet unavailable visually.
Use a visible baseline
The following small example keeps the card visible by default and adds a brief entrance only when the user has not requested reduced motion. The duration and distance are illustrative design choices, not universal thresholds.
```css
.product-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.product-card {
animation: product-enter 180ms ease-out both;
}
@keyframes product-enter {
from { opacity: 0.85; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
The [MDN reduced-motion reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) explains how the media feature reflects a user preference. CSS alone does not stop a separate JavaScript animation loop or autoplaying video. Ask Claude to inspect those paths too, using the same preference in the relevant controller.
Avoid a global rule that sets every animation duration to zero. Some code waits for an animation event to reveal content or clean up state. Replace that dependency with an explicit completed state in the static path; verify that completion runs once rather than leaving the page midway through a transition.
## Copy this repair prompt
```text
Review the attached product-page HTML, CSS and JavaScript. Preserve copy, product facts, links and the current document order.
List every animation with its trigger, initial/final state, and behavior when JavaScript fails or reduced motion is enabled.
Make prices, specifications and purchase links visible and usable in the baseline state. Add decorative motion only for no-preference. For explanatory motion, provide a labeled static alternative containing the same facts.
Inspect CSS, JavaScript timelines, requestAnimationFrame loops and video autoplay separately. Do not claim a CSS media query fixes all of them.
Remove dependencies that wait for an animation event to reveal essential content. Ensure cleanup/completion still happens exactly once on the static path.
Return the smallest patch and a test matrix covering normal motion, reduced motion before load, preference changes while open, JavaScript disabled, keyboard navigation and narrow-screen layout.
Do not redesign the whole page or promise conversion improvements.Test the fallback, not only the animation
Open the page with reduced motion enabled before loading it. Confirm that the same product facts and actions are available immediately. Toggle the preference while the page is open and check that existing motion stops without leaving a half-transparent card or a partially expanded diagram.
Disable JavaScript and reload. The core information should still be readable even if an advanced selector needs a simpler fallback. Tab through the page: visual entrance timing must not hide the currently focused control. At narrow width, confirm static diagrams keep their labels and do not require horizontal dragging to read the essential comparison.
Capture the static and animated states for review. Mark each result as tested, failed or not tested; generated code with a plausible explanation is not a passed browser test.
Prepare visuals for both paths
Create a complete product image or labeled static diagram in Panelly Studio and use it as the readable baseline. A separate motion layer can add explanation later. This does not claim a Panelly-to-Opus integration or that Panelly exports this page code.
For layout changes, see landing-page revisions. For a standalone rendered promo rather than an interactive page, use screenshot promo video.
Common questions
Does reduced motion mean a blank or simplified page?
No. Preserve the same information and actions; replace the movement with a usable static state.
Is a faster animation always enough?
No. Shortening motion neither repairs a script failure nor guarantees that the user can tolerate the remaining movement. Test the static path independently.
