Raymour & Flanigan
Room visualization campaign for Raymour & Flanigan furniture. Category navigation swaps entire room vignettes with GreenSock cross-fades, pricing callouts, and seasonal promotions.
Overview
Room visualization for Raymour & Flanigan. Category navigation swaps the entire vignette: background photography, product callouts, and pricing. GreenSock cross-fades between rooms while maintaining interactive product hotspots. Sale pricing uses original/sale comparisons with percentage-off badges and urgency indicators.
Furniture advertising sells aspiration through room styling, not individual SKUs. The ad needed to make users imagine these rooms in their own homes.
Context
Raymour was a recurring account, which meant the creative had to be built for reuse. The room vignettes were full-bleed background images, and each category tab swapped the entire layer stack (background, floating product callouts, pricing badges) in a single GreenSock cross-fade. The tricky part was the callout positioning. Product hotspots had to be placed precisely over specific furniture pieces within the photography, and those positions changed completely between rooms. I ended up with a per-room config object that stored callout x/y positions relative to the composition, so the same rendering logic worked across living room, bedroom, and dining layouts. The sale overlay system was the other reusable piece. Raymour ran promotions monthly, so the pricing callouts (original/sale/percentage-off) were data-driven and could be updated without touching the room photography.
How It Works
Room
Full-bleed styled room photography. Raymour & Flanigan logo and seasonal sale headline animate in.
Browse
Category tabs: living room, bedroom, dining. Each tab loads a new room vignette with featured product callouts and pricing.
Products
Featured product cards within each room: tapping a callout reveals the specific item, price, and original/sale comparison.
Shop
"Shop the Room" and "Find a Store" CTAs. Room-specific deep links to the collection page.
Engineering
Room Vignettes
Styled interior photography as full-bleed backgrounds. Floating callout elements positioned over individual furniture pieces within the room composition.
Category Tabs
Room category navigation swaps the entire vignette: background, callouts, pricing. GreenSock cross-fades between rooms.
Sale Overlays
Pricing callouts with original/sale comparison and percentage-off badges. Urgency indicators ("Sale ends Sunday") drive time-limited action.
Store Locator
Find-a-store CTA relevant for a regional retailer with 130+ showroom locations in the Northeast corridor.
Engineering Decisions
Nobody buys a sofa in isolation. They buy a living room. Styled vignettes show how pieces work together and create aspiration.
Raymour runs different promotions monthly. An overlay system lets the same room photography be reused with updated pricing overlays per campaign.
Furniture shoppers often need multiple rooms. Tabs let users explore their current project, whether that's a living room refresh or a full home furnishing.
Furniture is a high-touch purchase. Most buyers want to sit on the sofa before buying. The store locator bridges the digital-to-physical experience.
Project stack
HTML5
Markup
CSS3
Styling
JavaScript
Language of the web
GSAP
Animation
More projects
Target
Mass retail campaign with multi-category carousel, seasonal reskinning, and per-category CTA tracking
Saks Fifth Avenue
Luxury retail lookbook with editorial fashion photography, shop-the-look CTAs, and seasonal reskinning
LG OLED
Display technology showcase with split-screen comparison tool, pixel-level color demo, and product feature cards