Overview
Brand site for a seafood company — a public-facing storytelling experience built around interactive Rive animations as the visual centerpiece, with a product catalog, a masonry-style photo gallery, blog, and a Q&A section. Where most marketing sites would lean on static imagery or video, this one uses Rive's vector animations to keep every interaction lightweight and crisp on any screen size.
What I built
- Animated hero and product showcases using Rive (@rive-app/react-canvas) — interactive, runtime-controllable animations that respond to scroll and pointer state
- Masonry photo gallery with react-masonry-css for the product / lifestyle imagery
- Product catalog ("our-products" + "products") with detail pages and category navigation
- Blog section, FAQ-style "questions" page, and a "why us" brand-story flow
- Cookie consent banner with persisted choice
- Custom emoji / grapheme handling via grapheme-splitter for text effects that need to count visible characters correctly
Tech stack
- Frontend: Next.js 15 with Turbopack, React 19, Tailwind CSS v4
- Animations: Rive (@rive-app/react-canvas) for interactive vector animations, Lottie as a complement, Framer Motion for layout transitions
- Layout: react-masonry-css for the image gallery, multiple carousels (Slick, react-multi-carousel) for content rows
- UI primitives: Radix UI accordion + select
- State: Zustand
My role
Built the public site end-to-end. The interesting choice was committing to Rive over Lottie for the hero — Rive supports runtime state machines, so a single animation can react to pointer / scroll without re-exporting from the design tool. Worked from the designer's mockups for visual direction and adapted them into responsive, animation-driven layouts.
What I learned
Rive is genuinely better than Lottie for anything interactive. Lottie is great for fire-and-forget loops; Rive's state machines mean the same animation can pause, branch, or react to pointer position without you bouncing back to the design file. The trade-off is a steeper learning curve and a smaller community, so I kept Lottie around for simple loops and reserved Rive for the centerpieces where its state-machine model paid for itself. The other lesson was that masonry layouts are mostly a CSS-grid problem these days, and only the truly variable-height cases need a JS library — react-masonry-css is the right pick when content height isn't predictable from the data alone.
