The examples in
Motion · Next.jsThe shop's examples, as Motion would write them.
Each of Wardic's examples, written with motion/react on Next.js (App Router), running here. Every example's page in the Solid apps shows this code beside Wardic's, and links here to try it.
Entrances
How the shop arrives: lists and grids that reveal in order.
Layout
Elements that move and resize as the page changes around them.
A product opens into its detail view
Tap a piece and its card grows into the full view, photo, name and price carried across.
Filter the shop, switch the view
Pick a category and the products that stay slide together; switch to a list and every card reshapes into a row.
Tabs on a product page
Switch between a piece's description, details and delivery, and the underline slides to the tab you chose.
Add to cart, and see it's done
The button says what it's doing, adding then added, and makes room for a way to the cart.
Questions that open in place
Open an answer, and its card grows to fit while the questions below slide down to make room.
A cart drawer that keeps up
Change a quantity or remove a piece, and the lines below close up at once, before the store has answered.
Order history in a scrolling panel
Sort your orders and each one glides to its new place; open one and only the orders below it make room.
Gestures
Hover, press, drag and swipe, with the momentum of the hand.
Notifications you swipe away
Throw a notification aside and it flies off; for four seconds you can undo it, then it's gone and the rest close the gap.
A wishlist you rearrange by hand
Drag a piece up or down and the others make way; let go and the new order is saved. The list is shared, and other people's moves glide in live.
Presence
Things that leave as nicely as they arrive.
"Added to cart", in toasts that make room
Each piece you add says so in a toast; when one goes, the others close the gap.
A photo gallery that slides the way you go
Swipe or step through the collection's photos: each comes in from the side you're heading to, and the last one leaves by the other.
A quick view whose list leaves before it
Open a piece in a quick view and dismiss the suggestions you don't want. Close it, and what's left of the list goes first.
Saved for later, moved to the cart
Move a saved piece to your cart and its photo flies into the cart; remove one and it fades. The rest close up behind it.
Live values
Values that follow the pointer, the scroll or each other.
A closer look at the glaze
Hover over the vase and a lens follows your pointer, gliding after it and settling where you stop.
A reading bar for the studio's story
Scroll through how the Lagoon glaze is made, and a bar along the top fills as you read, the minutes left beside it.
A lookbook with depth
Scroll the lookbook and each collection's photo drifts slower than its banner and its words faster, as if they sat at different depths.
The studio's story, revealed as you read
Each chapter of the studio's story rises into place as it scrolls into view, its photo first and its words after.
Cards that catch the light
Move over a piece and its card tilts toward your pointer, with a soft light under it that follows.
Server rendering
Animations that play before the JavaScript has loaded.