Case playbackInteractive web experience
SlimPick
An immersive product story that turns a two-formula, 30-day supplement system into a clear day-to-night routine.
- Role
- Creative Development & Frontend Engineering
- Field
- Consumer wellness
- State
- Live
Project playback
One product.Four decisive moves.
I built a responsive product website for Nutricode SlimPick, using scroll-driven storytelling, interactive ingredient scenes, a WebGL shader, and clear day-to-night guidance before checkout hands off to Shopify.
Signal 01
Need
SlimPick combines two formulas, three daily moments, ingredients, directions, warnings, and a separate Shopify checkout. The website needed to make that information clear without flattening the product story.
Signal 02
Move
The finished site organizes the story around a day-to-night rhythm. Product imagery, interactive ingredient chapters, timing guidance, safety information, comparisons, and the purchase handoff appear in a clear sequence.
Signal 03
Build
React powers the interface, GSAP and ScrollTrigger coordinate narrative motion, and a custom WebGL shader adds atmosphere without obscuring the product content.
Signal 04
Shipped
Live product story. Structured guidance. Responsive interaction.
Build field
The work, exposed.
I shaped and built the frontend experience, translating the Day and Night system into a responsive, scroll-led product journey.
Owned end to end
- 01Product storytelling and information architecture
- 02Responsive React development
- 03GSAP and ScrollTrigger choreography
- 04Custom WebGL shader integration
- 05Accessibility and reduced-motion support
Day-to-night narrative
A scroll-led product journey keeps the two formulas and three daily moments connected from the hero through the…
Ingredient explorer
Interactive chapters reveal the Day and Night ingredient groups while preserving clear amounts, timing, and safety context.
Purchase handoff
Focused calls to action continue to the official SlimPick Shopify store without presenting the portfolio site as the…
Technology
- React
- GSAP
- ScrollTrigger
- WebGL
- Responsive Design
Proof of ship
What changed.
Live product story
The published experience presents the complete Day and Night system and connects visitors to the official Shopify store.
Structured guidance
Formula details, timing, ingredients, warnings, and FAQs are arranged in one coherent sequence.
Responsive interaction
The motion system adapts across desktop and mobile, with reduced-motion behavior available.
Case fileRole, full brief, and questions
My role
Creative Development & Frontend Engineering
I shaped and built the frontend experience, translating the Day and Night system into a responsive, scroll-led product journey.
- Built for
- Prospective SlimPick customers
- Location
- Poland / Web
- Type
- Interactive web experience
- Case updated
Full brief
Need
SlimPick combines two formulas, three daily moments, ingredients, directions, warnings, and a separate Shopify checkout. The website needed to make that information clear without flattening the product story.
Move
The finished site organizes the story around a day-to-night rhythm. Product imagery, interactive ingredient chapters, timing guidance, safety information, comparisons, and the purchase handoff appear in a clear sequence.
Build
React powers the interface, GSAP and ScrollTrigger coordinate narrative motion, and a custom WebGL shader adds atmosphere without obscuring the product content.
Questions, answered
What is SlimPick?
SlimPick is a 30-day Nutricode food-supplement system with separate Day and Night powder sachets.
What did Zahra build?
Zahra shaped and developed the responsive frontend experience, including its product storytelling, interactions, motion, and WebGL atmosphere.
Does the website process checkout?
No. The purchase buttons continue to the official SlimPick Shopify store.
Which technologies power the experience?
The published frontend uses React, GSAP, ScrollTrigger, and a custom WebGL shader.
Have a product that needs a real system?
Start a project