Explore Cue’s page transition series
A focused collection of page-change patterns to study before adding motion to a real site.
Cue is building a collection of page transitions recreated from notable interactions around the web. Its current library shows examples such as Arrow-Bar Scroll, Ribbon Curtain, Woven Grid Shutter, and Obsidian Curtain under Page Transitions. More entries are planned. This is a useful place to compare how a transition changes the feel of navigation before choosing one for a project.
The value is in observing the transition as a complete interaction: what triggers it, what covers the old page, when the new page appears, and how the overlay clears. Cue provides AI prompts for its components, while React source code is still being added across the library. Check the particular entry for what is available before planning an implementation around it.
Compare the motion, then choose one
Open several Page Transitions examples and note their visual weight and timing. A curtain can make an editorial site feel theatrical; a brief shutter or bar can make navigation feel quicker. Pick one pattern that suits the content and keep it consistent rather than stacking different transitions across routes.
Define the page-change sequence
For the chosen reference, write down the exit phase, the page swap, and the entrance phase. Confirm what happens to focus, scrolling, loading states, browser back navigation, and reduced-motion preferences. A transition that looks good in a clip can feel slow or confusing when users navigate repeatedly.
Copy a transition brief
This is an original implementation brief inspired by studying the collection, not a copy of a Cue component prompt.
Inspect this project’s routing, existing animation system, and reduced-motion handling. Use the selected Cue page-transition reference as visual direction for navigation between [routes]. Describe the exit, page swap, and entrance phases with durations, easing, and layer order before coding. Keep navigation, browser back/forward, scroll restoration, focus placement, and loading/error states correct. Implement one consistent transition, add a reduced-motion version, and verify repeated navigation on desktop and mobile. Report any behavior that differs from the reference.