Choose a photo
A grandparent, a wedding day, the kids. It’s set behind the lens.
The Hundred Languages Pendant is a heart with a lens no bigger than a lentil at its centre. Hold it to the light and a photo you chose appears inside.
See the scroll storyClientOutfyd
What we didArt direction, imagery, design and build
PlatformGSAP on the Outfyd store
TimelineOctober 2026
StatusPrototype
The idea
A keepsake you have to hold to the light.
The product is small, and its best feature is invisible until you look into it. The page had to show what’s inside the lens before anyone thought to ask.
Pick a finish
Rose gold, gold or silver plating on the same heart frame.
Hold it to the light
Put the stone to your eye and the photo fills the view.
A$44.95Price
3Finishes
1Photo, in the lens
6–10Days to ship
Scroll story
One photograph, one camera move.
There are no sections in the usual sense. A single product shot sits behind the whole page, and scrolling moves a camera across it. Pick a stage to see where the camera is.
outfyd.online/outfyd/hundred-languages-pendant
Look closer
Their photo, inside the stone.
Upload a photo and it drops straight into the lens. An amber cast, a soft bloom from the top and a darker rim make it read as light through glass, not a sticker.
Try a photo
- Amber castA sepia and warmth pass, like light through the lens.
- BloomA soft glow from the top, where the light comes in.
- RimThe edge darkens, so it sits inside the stone.
Three finishes
Rose gold, gold or silver.
Each finish is a layer over the same shot, so switching is a soft cross-fade and the pendant never jumps. The choice follows you from the hero to checkout.
Checkout
Then the lights come up.
At the end of the scroll the page fades from night to ivory. Finish, necklace or keyring, your photo, add to bag: everything on one calm screen.
outfyd.online/outfyd/hundred-languages-pendant
Imagery
From supplier shot to campaign.
The supplier’s catalogue photos were the only source. Every image on the page was generated from them: the studio shot, the model in three finishes and the photos in the lens.
Brand system
Quiet, dark and warm.
A night palette that lets the metal do the talking, ivory for the moment of purchase, and the three plated finishes as the only colour.
Night#0B0A09
Dark#141210
Ivory#EFEAE2
Ink#F3EEE6
Rose gold#D99C88
Gold#CFA24C
Silver#C7CAD0
Lens glow#FF8C3C
Wordmark · Italiana
OUTFYD
Display · Cormorant Garamond Light
Hold it up to the light.
Body · Jost Light
Inside the stone is a lens no bigger than a lentil.
Components
Add to bagTry it with your photo
Label · Jost, spaced caps
Look closer
Mobile
Built for a phone in one hand.
On a phone the camera re-frames for portrait. The product holds the top of the screen and the copy rises out of the dark beneath it.
Under the hood · The camera rig
One photo, moved like a film camera
The page is one square product photograph held behind the copy. We know exactly where the lens sits in that photo, so every chapter of the scroll is a camera position: where to point, how close to go and what to fade in. One timeline plays them in order as you scroll.
- 01
Photo
One square studio shot, sized so the camera can travel without running off the edge.
- 02
Anchor
The lens is measured once, as a point and a radius inside the photo.
- 03
Timeline
One GSAP ScrollTrigger timeline: push in, focus, pull back, fade to the model.
- 04
Layers
Gold and silver are masked colour layers over the same photo, so finishes cross-fade.
- 05
Lights up
At checkout the night fades to ivory and the menu switches to dark ink.
Projected light
Any uploaded photo gets the amber, bloom and rim treatment.
No jumps
Finishes are layers, not new photos, so nothing shifts.
Re-framed for phones
Portrait has its own camera positions and a copy panel below.
Reduced motion
If motion is turned down, the drift and the shimmer stop.
The stack
What it runs on
PageHTML, CSS and JavaScript
MotionGSAP ScrollTrigger
FinishesCSS masks and filters
ImageryAI, from supplier photos
StoreNext.js
PaymentsStripe
FulfilmentCJ Dropshipping
TypeCormorant, Jost and Italiana
OUTFYD
I love you, said a hundred ways.
- Role
- Art direction, imagery, UX, design and front-end build
- Built with
- GSAP ScrollTrigger, CSS masking and AI imagery
- Live
- outfyd.online
The result
A small product with a hidden feature now shows it in the first scroll. One photograph carries the whole page, every image came from the supplier’s catalogue, and the same approach works for the next product in the store.
Start your project