CraftberryEarlier platform work
Agency website with visual design, motion and editable content.
The project at a glance
Earlier projects in publishing, applications and platforms. Their technical details describe the original work.
- Our contribution
- Agency website with visual design, motion and editable content.
- Why it matters
- Shows our work on translating a brand into a usable content experience.
An agency’s site should prove what it sells.
Craftberry builds high-craft commerce experiences for Shopify Plus brands. Its own website had to do the same — showcase creative expertise the moment a visitor lands, while staying flexible enough for the team to rewrite, reorder and relaunch content without waiting on a developer.
Alphabite built a headless site that carries both: a motion-led front end polished enough to read as a portfolio in itself, over a Storyblok content layer that turns every section into something the marketing team controls directly.
Showcase
Advanced motion and scroll-triggered animation that demonstrate craft, not just describe it.
Iterate
Storyblok makes every block editable — copy, imagery and order — with no deploy in the loop.
Perform
A headless architecture that balances the rich motion with fast, resilient delivery.
A headless site, engineered for motion and change.
Five pieces, designed together: a headless front end, a Storyblok content layer, an advanced motion system, scroll-triggered choreography, and an editing model the team actually owns.
Headless website
A decoupled front end that renders content from Storyblok — free to be as expressive as the design demands without fighting a monolithic template.
Storyblok CMS
Every section modelled as an editable block, so the team composes and rewrites pages visually — no code, no deploy.
Advanced motion
A considered motion system — parallax, reveals and transitions tuned to feel premium rather than decorative.
Scroll-triggered animation
Sections choreograph themselves to the scroll, turning a plain page into a paced, cinematic walkthrough.
Flexible editing
A content architecture built for experimentation — new pages and campaigns ship with minimal friction.
The scroll is the interface.
Motion isn’t a coat of paint on top of the site — it’s how the story is paced. Every section is choreographed to the scroll so the experience unfolds instead of just loading. Scroll this strip to feel it.
Parallax depth
Layers move at different speeds to give flat sections a sense of depth and space.
Scroll-linked reveals
Type and imagery resolve into place as they enter the viewport — nothing arrives unannounced.
Sticky sequencing
Pinned sections let a single moment breathe while the content around it advances.
Reduced-motion aware
The whole system honours the visitor’s motion preference — the story still reads with animation off.
Drive the strip yourself — the motion is linked to your scroll, exactly as it is across the live site.
Edit the site. Watch it change.
This is the heart of the build: every section is a Storyblok block the team edits directly. Rewrite the headline, switch the accent, reshape the layout — the agency hero on the right re-renders live, the same way it does in the real editor.
Type in the fields, pick an accent and a layout — the preview updates as you edit.
Commerce that feels made, not templated.
A Shopify Plus agency building headless storefronts for brands that care about the details.
Interactive playground — the copy and accents here are illustrative demo values you can rewrite; not live Craftberry content.
Headless, typed, and tuned for motion.
A lean modern toolset — a Next.js TypeScript front end rendering Storyblok content, with a motion layer for the scroll choreography and Tailwind holding the design system together.
A TypeScript React app rendering the headless site with server-side speed.
End-to-end types across content models and components — safe to iterate fast.
The headless CMS — every section is a block the team edits and reorders.
A scroll-linked motion layer driving parallax, reveals and pinned sequencing.
A disciplined utility system keeping the dark, editorial aesthetic consistent.
A site that markets itself — and updates itself.
The result gives a Shopify Plus agency a digital presence as considered as its work, plus the freedom to keep it moving without engineering in the loop.
A presence that proves craft
Motion-led storytelling turns the homepage into a live portfolio — the site is the pitch.
Iterate at marketing speed
Storyblok blocks let the team experiment, publish and relaunch content with minimal friction.
Storytelling with performance
A headless architecture carries rich motion without trading away speed or resilience.
Low-friction publishing
New pages and campaigns go live without a developer — the team owns its own momentum.
What would you like your store to do better?
Show us what you sell, what you have in mind and where you are getting stuck. We will work through the options with you.