Skip to content
Imagio Labs

Work / 02 Web Design / Development / Motion

SALEXTRA

Six kinds of object, one surface

A manufacturer’s storefront had to carry a hardware range and a point of view on the same surface.

SALEXTRA · Client project

01 The engagement

Salextra is a custom digital experience designed around movement, hierarchy and interaction. Imagio developed the visual direction, responsive interface, content structure and front-end experience using React and GSAP, creating a site where motion is part of the communication rather than decoration.

02 The surface

Screenshot of the live salextra.com home page: a black navigation bar reading Home, About, Partners, Businesses, Careers, Media, with Contact at the right; below it on near-black, an enormous “salextra” wordmark in white and orange, the line “Innovation to Enhance Daily Lives”, and the sentence “We operate the infrastructure behind global technology and lifestyle brands across Bangladesh & South Asia - from factory floor to retail shelf to digital cart.”
SALEXTRA — salextra.com
SCREENSHOT OF THE LIVE LANDING PAGE · 1440 × 900 · CAPTURED 30 SEPTEMBER 2026

03 The problem
and the idea

The problem. Salextra manufactures, distributes and sells phones in Bangladesh. A catalogue that behaves like a catalogue answers the question a shopper came to ask and then stops helping; a brand site that behaves like a brand says nothing about the range. The storefront had to hold both without either one flattening the other, and without the range collapsing into an undifferentiated grid.

The idea. An active, considered storefront rather than a stock template. Motion supports discovery and hierarchy instead of competing with them, and every block of content is given one clear purpose.

04 The work

What we did,
in order.

ScreenSplitZoomReassemble

01 · A catalogue model that survives the next modelThe range spans feature phones, smartphones, tablets, earbuds, headphones and watches — six kinds of object with almost no fields in common. Specifications are therefore an ordered list of label and value pairs rather than a fixed object with optional keys, because a rigid shape across that range renders as mostly empty fields, and the difference between two products disappears into the shape of the data instead of into what the products are.
02 · A device that is never missingEvery product is drawn as a vector device as well as photographed — one set of vector bodies for the six kinds, recoloured per product. A range with an incomplete photography set still gets a page that looks deliberate, and real photography can replace a drawing later without touching the scene choreography around it.
03 · Scenes that are machines, not tricksEach long scene is a tall scroll container whose child is fixed to the top of the screen for exactly one viewport. The container supplies the distance, the child supplies the picture, and that distance read as a single number is the entire timeline. Once the pattern exists, a new scene is a length and a piece of content rather than a bespoke animation.
04 · Nothing re-renders during a scrollScene progress is published through a ref and read imperatively inside the animation callbacks, so moving a page never causes React to render a frame. Colours, blur and opacity that only need interpolating are handed to a CSS custom property instead, which costs the frame nothing at all.

05 Craft & sequencing

The decisions,
and why.

Why one job per blockEvery block either introduces something, demonstrates something, or moves the reader onward — never two of the three. A block that tries to introduce a product and sell it in the same breath gives the reader no reason to keep reading, and the page loses the one thing it has that a grid cannot have: a sequence.
Why the type is set before the layoutThe order of the range, the length of each product name and the room a specification needs were settled first, because those are what decide whether a card is a card or a wall. Designing the layout first and fitting copy into it afterwards is how catalogues end up with a card that is ninety per cent padding.
Why reduced motion is a branch, not a patchWhen motion is turned down the scenes resolve to their final state immediately and no trigger is ever created, rather than playing fast or playing late. The page is the same page either way; only the way it arrives differs.

06 The scope

The part we held

Custom web design and development; React implementation; GSAP interaction design; content structure and design; responsive refinement across the range of screen sizes.

  • Art direction
  • UX/UI
  • React development
  • GSAP animation
  • Responsive design
  • Content design
  • Interaction design
ClientSalextra
BuildNext.js · React · TypeScript · GSAP ScrollTrigger · Tailwind
StatusClient project
SALEXTRA.COM

07 Through the method

Observe. Think.
Imagine. Launch.

OBSERVEA catalogue that behaves like a catalogue answers one question and then stops helping; a brand site says nothing about the range. A company that manufactures, distributes and sells phones needs both without either flattening the other.
THINKThe storefront and the story are one surface seen at two speeds — a spec read fast, a brand read slowly.
IMAGINEMotion as part of the communication rather than as decoration, so the page behaves like a product demonstration rather than a price list.
DESIGNOne clear purpose per block, and the type set before the layout — hierarchy arrives from the reading order, not from containers drawn around things.
BUILDA catalogue model that survives the next model, and devices that are never missing, in React and GSAP, with nothing re-rendering during a scroll.
TESTReduced motion is a branch of the design rather than a patch applied to it — the scene is authored twice, and neither version is a degraded copy of the other.
LAUNCHClient project. Live at salextra.com.

08 Other pages, captured

The rest of the surface.

SALEXTRA — LandingLanding · SALEXTRA
The range introduced as movement rather than as a catalogue — motion carrying the argument about the products instead of decorating it.
SALEXTRA — The XTRA rangeThe XTRA range · SALEXTRA
Each model given its own scene instead of a slot in a grid, so a visitor meets one device at a time.
← GREY MATTERFLATR →All engagements