Loading

Pedro Tamburro is a product designer & design engineer crafting digital products end to end.

●Rio de Janeiro, BR
●Your time
Let's Talk

Alex Toys!

Alex ToysProduct DesignFull-StackAI Engineering
Imagem principal do projeto Alex Toys!

A cinematic landing that flies through a miniature toy store, wired to a real shop with a back-office the owner runs alone.

Overview

A digital ecosystem for Alex Toys, a classic-and-modern toy store in Rio de Janeiro. Two connected pieces: a cinematic landing where the camera flies from outside into a miniature mega toy store as you scroll, and a full shop with catalog, cart, WhatsApp checkout and a back-office built for a non-technical owner. All of it derived from a single business card as the brand's only material.

Details

Year
2026
Role
Product Designer & Full-Stack
Duration
Client project · continuous delivery
Team
Solo
Tools
Next.jsTailwindClaude CodeHiggsfieldVercel

In motion

The problem

A Rio toy store sold only through Instagram and WhatsApp, with no catalog, no storefront and a single business card as its entire brand material.

My role

Product Designer & Full-Stack, solo: identity, immersive landing, shop, back-office and deploy.

The outcome

A live landing with a continuous fly-through and a shop with WhatsApp checkout and a product panel usable by someone who has never touched an admin.

01

The Problem

Alex Toys had an identity but no digital presence of its own. Sales depended on DMs and scattered messages, with no browsable catalog, no storefront and no link that carried the brand's warmth. The hardest constraint was operational, not aesthetic: whatever we built had to be run by someone with no technical background, and adding a toy had to be as easy as posting a story. With a business card as the brand's only raw material, the identity had to be extracted and expanded from scratch.

02

The Challenge

Turn a business card into a coherent visual system and, on top of it, ship two experiences with different purposes and the same soul. Cost shaped the project too: the immersive experience was produced on a fixed budget of generation credits, which meant deciding precisely how many scenes to generate and at what quality.

03

The Immersive Experience

The landing is a continuous fly-through: as you scroll, the camera dives from outside into a miniature mega toy store, from the storefront through the aisle of classics to the new arrivals, with no cuts. It was built with the scroll-world skill running in Claude Code, wired to Higgsfield (the Seedance video model) to generate the scenes and camera clips. Each scene is an isometric image consistent with the previous one, clips are chained with frame-identical seams (a clip's real last frame becomes the next one's first), and a scroll-scrub engine syncs the video to scroll position. All copy lives in HTML overlays, never inside the images, which keeps text sharp and editable for free. Recurring characters cross all four scenes and carry the narrative.

04

The landing, scene by scene

Storefront: where the flight begins

Storefront: where the flight begins

Aisle of classics, no cut between scenes

Aisle of classics, no cut between scenes

New arrivals, the end of the journey

New arrivals, the end of the journey

05

The Shop and the Back-office

The landing's main CTA leads to the full shop: a storefront with featured items and new arrivals, a catalog with category filters, search and sorting, product pages and a cart. Checkout completes over WhatsApp with the order pre-formatted, so the shop actually sells from day one without waiting on a payment gateway. Its operational core is the owner's panel: a dashboard with stock at a glance and a product CRUD designed for someone who has never used an admin, where adding a toy means filling in name, price in reais and a photo. Flagging it as featured puts it straight on the home page.

06

Storefront and catalog

Storefront with featured items and new arrivals

Storefront with featured items and new arrivals

Category navigation

Category navigation

07

Catalog with category filters, search and sorting

Catalog with category filters, search and sorting

08

The owner's panel

Dashboard with stock at a glance

Dashboard with stock at a glance

Product management: name, price and photo

Product management: name, price and photo

09

Both ends on mobile

Landing
Landing
Loja
Loja
10

Identity & Design System

The identity was extracted from the business card and systematized: a mint-green base, dark purple ink, pink and yellow accents borrowed from the toys. Landing and shop share one system, so moving between them never feels like a change of brand.

11

Architecture & Technology

Vanilla HTML/CSS/JS + scroll-scrub engineHiggsfield (Seedance 720p) + ffmpegNext.js (App Router) + TailwindReact ContextVercel

The landing runs as a static page, no framework, with a portable scroll-scrub engine and graceful degradation where scrubbing isn't supported. Image and video assets came from the scroll-world skill with Higgsfield and were processed with ffmpeg for the frame-identical seams. The shop is Next.js with Tailwind and React Context for product and cart state, with local persistence in the MVP. Deploys are continuous on Vercel on every push. Login, online payments and a database already have integration points isolated in a single layer, ready to plug in without rewriting the app.

12

Outcomes & Learnings

The brand moved from 'Instagram only' to an ecosystem of its own: a landing that delights, a shop that sells and a panel the owner runs alone. The main learning: on a limited generation budget, scoping the immersion (number of scenes × quality) is a product decision, not an aesthetic one: calibrating a single scene before generating the whole chain saved credits and avoided rework.