STIFF was one of those rare projects where the brand gave us permission to explore. From our first conversations, it was clear the client wanted a website that felt bold, modern, energetic, and unmistakably their own — while still remaining functional, fast, and easy to use.

Instead of approaching the project as a traditional marketing website, we treated it as a guided journey. Our goal was to design an experience where pacing, motion, and visual attitude worked together to build narrative flow. The challenge was in finding the balance: expressive enough to feel alive, but restrained enough to stay clear and usable.

Challenge

The core challenge behind STIFF wasn’t a lack of ideas — it was deciding how to shape them into a coherent, scroll-driven story that felt smooth and intentional.

We were tasked with creating:

• a bold but uncluttered interface
• an expressive but lightweight motion system
• a homepage built as one continuous scrolling journey, not sections stitched together
• an experience that works across devices without relying on heavy GPU techniques

The brand had an energetic personality, but too much motion or detail would quickly overshadow clarity. Our challenge became finding equilibrium: giving STIFF a distinctive digital voice while building something genuinely usable, scalable, and performant.

This balance became the core design and engineering problem we solved throughout the project.

Discovery

Discovery focused on establishing tone rather than features. We explored how typography, spacing, colors, layouts and movement could communicate attitude long before adding any detailed visuals. Words like bold, charged, direct, and slightly offbeat became anchors for early decisions.

Discovery focused on tone before features. We explored how hierarchy, spacing, and typography could carry the brand’s energy without relying on complex visuals.

During this stage, illustrations and iconography played a larger role than initially expected. Together with the client, we developed a series of expressive illustrations and icons that captured their personality — confident, slightly rebellious, and full of character. These elements weren’t meant to dominate the interface, but to serve as accent moments that amplify the brand’s voice. We iterated heavily with the client on style, proportions, and expressiveness until every illustration felt uniquely “STIFF.”

Motion exploration followed the same principle: we tested timing, ease, transitions, and interaction patterns to find the right balance between boldness and control. These early prototypes shaped the website’s overall rhythm.

Visual, Motion & Interaction Language

Visual System

The website’s visual foundation prioritizes clarity. Confident typography, clean layout blocks, strong contrast, and consistent spacing created a structure solid enough to support expressive motion and subtle illustrated accents. With this approach, the interface stays functional and predictable even when brand personality is introduced.

Motion as Narrative

Motion was never treated as decoration. It was treated as narrative. We explored how transitions, timing, and directional movement could guide users through the story.

Prototypes helped us refine:

• pacing
• hierarchy
• how elements appear, shift, and exit
• when interaction should feel playful vs. calm

This research enabled a motion language rooted in clarity and rhythm.

Interaction with Purpose

Every interaction — from hover states to scroll-triggered transitions — was designed to reinforce the overall flow. GSAP powered all animations using clean, DOM-based timelines. Without relying on WebGL or GPU-heavy visuals, we had full control over timing and responsiveness while keeping performance predictable.

Interactions were crafted to feel expressive but supportive, gently guiding the user’s attention without stealing focus from the content.

The Homepage Scroll Journey

The homepage became the heart of the project — a single, uninterrupted sequence orchestrated through GSAP ScrollTrigger. Instead of designing individual sections, we designed a storyline and built it as one continuous timeline.

We stitched multiple animations together to create transitions that feel fluid rather than sectional. Even small adjustments in easing or duration changed the entire character of the experience, so we iterated obsessively until scrolling felt natural, controlled, and immersive.

This single-scroll approach is where the brand truly comes alive: a blend of storytelling, pacing, subtle illustrated touches, and carefully tuned motion that gives the site its distinct feeling.

This is where the full personality of STIFF emerges: not through visuals alone, but through the feeling of moving through the story in one uninterrupted motion.

“Motion became our narrative tool — not decoration, but guidance.”

Development, Technology Challenges & Takeaways

Development Approach

Our engineering approach followed a “prototype early, integrate late” workflow. We built isolated motion experiments, tested timing and responsiveness early, and only merged them into the larger architecture once they felt right. This reduced friction and allowed design and development to evolve together.

Performance Challenges

With motion taking center stage, performance had to remain a top priority. We optimized SVG complexity, reused GSAP timelines, minimized layout shifts, and implemented efficient scroll logic. The entire site runs smoothly without relying on GPU-heavy effects.

Scalability & Maintainability

The site is built using a modular component structure and clearly segmented animation timeline blocks. This allows new scroll sequences, sections, or branded moments to be added without rewriting large parts of the codebase. Using Next.js ensures a modern, scalable architecture with predictable rendering behavior.

Modernity Without Over-Engineering

We made deliberate choices to avoid unnecessary complexity. No WebGL, no shaders — everything is DOM-based. The stack remains modern yet lightweight, in line with the brand’s needs and the project’s long-term maintainability.

Key Takeaways

• Motion must support narrative, not compete with it.
• Prototyping motion early prevents misalignment later.
• Continuous scroll experiences rely heavily on pacing discipline.
• Small illustrated accents can add personality without crowding the UI.
• Performance isn’t a final step — it’s a design constraint from day one.

Tech Used

Frontend

• Next.js (App Router)
• React
• GSAP (ScrollTrigger + Timelines)
• Tailwind / CSS Modules
• SVG assets for icons + illustrations

Backend & Hosting

• Next.js server
• Vercel (edge network, performance optimization)

Tools

• Figma
• Illustrator (icon + illustration development)
• After Effects (motion reference prototyping)
• GitHub

Final thoughts

The final STIFF website blends clarity, personality, and modern motion. Expressive animations guide users through a cohesive journey, while small illustrated elements add charm without overwhelming usability. The continuous scroll experience gives the project its character, weaving together timing, rhythm, and subtle brand touches.

Most importantly, the site is built as a long-term asset — scalable, maintainable, and strategically positioned to grow with the brand. It feels alive without sacrificing clarity, and confident without leaning on heavy visual noise.

Company information

Buzzworthy is a creative studio focused on building digital experiences where design, motion, and engineering work as one system. We believe craftsmanship is not just visual — it’s strategic. Over the years, we’ve seen that when motion, layout, and strategy align, brands see measurable improvements in engagement, conversion, and perception.

We treat websites as long-term investments, not one-off marketing artifacts — and STIFF reflects that philosophy.