Brendon Rice
Back to work

Case study · Outfyd

Hold it up, look inside.

See the pageoutfyd.online

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. I made its product page for the Outfyd store: the art direction, every image, generated from the supplier’s catalogue photos, the design, and a scroll-driven build where one photograph carries the whole page.

ProjectOutfyd
RoleArt 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.

A family photo seen through the pendant's lens
01

Choose a photo

A grandparent, a wedding day, the kids. It’s set behind the lens.

The pendant in gold
02

Pick a finish

Rose gold, gold or silver plating on the same heart frame.

The pendant worn, in rose gold
03

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
Hero: the pendant on dark satin with the headline I love you, said a hundred ways Into the lens: the photo appears inside the stone Finishes: the pendant worn by a model Checkout: the purchase panel on ivory
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.

A woman and her grandfather, seen through the lens A family on a picnic rug, seen through the lens An old wedding photo, seen through the lens

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.
The Try it with your photo button
The one button asking for attention: a gleam circles its border and the letters swell one at a time.
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.

The pendant worn, in rose gold The pendant worn, in gold The pendant worn, in silver
Close-up in rose gold Close-up in gold Close-up in silver
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
The purchase panel: finish, necklace or keyring, your photo and add to bag
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.

The supplier's catalogue photo on white
Supplier photoThe starting point
Generated studio shot on dark satin
Studio shotGenerated · dark satin
Generated model shot
On the modelGenerated · three finishes
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.

The hero on a phone
Inside the lens on a phone
Checkout on a phone

Under the hood · The camera rig

One photo, moved like a film camera.

The page is one square product photograph held behind the copy. I measured 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.

  1. 01

    Photo

    One square studio shot, sized so the camera can travel without running off the edge.

  2. 02

    Anchor

    The lens is measured once, as a point and a radius inside the photo.

  3. 03

    Timeline

    One GSAP ScrollTrigger timeline: push in, focus, pull back, fade to the model.

  4. 04

    Layers

    Gold and silver are masked colour layers over the same photo, so finishes cross-fade.

  5. 05

    Lights up

    At checkout the night fades to ivory and the menu switches to dark ink.

What the page does

Projected lightAny uploaded photo gets the amber, bloom and rim treatment.
No jumpsFinishes are layers, not new photos, so nothing shifts.
Re-framed for phonesPortrait has its own camera positions and a copy panel below.
Reduced motionIf motion is turned down, the drift and the shimmer stop.

What it runs on

PageHTML, CSS and JavaScript
MotionGSAP ScrollTrigger
FinishesCSS masks and filters
ImageryAI, from supplier photos
StoreNext.js
PaymentsStripe
FulfilmentSent automatically once paid
TypeCormorant, Jost and Italiana

OUTFYD

I love you, said a hundred ways.

Role
Art direction, imagery, UX, design and the front-end build
Built with
GSAP ScrollTrigger, CSS masking and AI imagery
Live
outfyd.online
Next project Love in a Book ↗
Or All work