Fern — Sustainable Botanical Brand Experience
A brand site where the motion is the argument
A marketing site for a premium botanical wellness brand, built to sell through storytelling rather than specification. The constraint that shaped every decision: a site that feels this considered usually loads like it, and that trade is not one a premium brand can afford to make.
- Type
- Brand & marketing site
- Role
- UI/UX design & front-end build
- Core stack
- React 19 · Vite · TypeScript · Framer Motion
- Focus
- Motion design under a performance budget
The problem
Premium positioning in wellness is carried almost entirely by feel. The product claims are similar across the category, the price is higher than the shelf average, and the job of the site is to make that price feel obvious rather than argued. That means generous space, unhurried motion, and photography given room to work.
Every one of those instincts is expensive. Immersive scroll sequences ship JavaScript. Large photography ships bytes. Animation that runs on the wrong properties drops frames on exactly the mid-range phones most of the traffic arrives on. The usual outcome is a site that looks premium in a design review and feels cheap on a real device.
So the actual brief was narrower than "build a beautiful brand site": build one whose beauty survives contact with a mid-range Android on a hotel connection.
What I built
A Scandinavian-inspired storytelling site on React 19 and Vite, with TypeScript throughout and Framer Motion handling every transition.
A scroll-led product narrative — sections that reveal in sequence, so the story arrives in the order it was written rather than all at once.
Sustainability as structure, not a badge — the sourcing story is a section of the page with its own pacing, because for this category it is a purchase reason rather than a footnote.
A component architecture built to be extended — sections compose from a small set of primitives, so a new product line is an afternoon rather than a redesign.
Responsive layouts that re-compose rather than reflow — the mobile view is its own arrangement of the same content, not the desktop grid stacked.
The technical decisions, and why
Vite over a meta-framework, deliberately
This is a marketing site with no per-request data and no authenticated state. Next.js would have brought a server runtime, a routing model and a rendering matrix to a problem that has none of those needs. Vite gives a fast dev loop and a lean static bundle, and every capability not shipped is one that cannot slow the site down or break in production. Choosing the smaller tool is a decision, and it should be defended as one.
Animating only transform and opacity
Framer Motion makes it equally easy to animate any property, which is precisely the risk: animating layout properties forces the browser to recalculate geometry every frame and is the single most common cause of janky scroll effects. Restricting the motion vocabulary to transform and opacity keeps the work on the compositor, where it stays smooth on hardware that has no headroom to spare.
Motion that respects the visitor
Scroll-driven reveal is decoration, so it is gated on prefers-reduced-motion and on the element actually being in view. Nothing animates off-screen, and a visitor who has asked their operating system for less movement gets the content without the choreography. Motion that ignores that setting isn't premium, it's careless.
TypeScript on the content model
On a marketing site the components are simple and the content is not. Typing the content shape means adding a product with a missing image or a malformed price fails at build time, when it is free to fix, rather than rendering an empty box in front of a customer.
Where it landed
The site reads as unhurried and considered while staying inside a lean static bundle — the two things this category usually forces you to choose between.
The composition-first architecture is what makes it maintainable: sections are assembled from shared primitives, so extending the range or reordering the narrative is content work rather than engineering work.