I led the design and development using a multi-phase process:

1. Visual Exploration and Prototyping

Using Figma, we explored thematic directions inspired by organizational transformation clouds, elevation, clarity, and system flow. I worked directly with the Linero team to refine page layouts and structure the narrative across sections.

2. 3D Scene & Conept Development

Using Blender, I built and rendered miniature workplace dioramas—each representing different nodes of interaction within Linero’s feedback ecosystem. These were not just decorative: they visualized how the product metaphorically lives within the day-to-day environment of teams.

3. Animation and Motion Layering

Subtle scroll-linked animations were added to guide users through the story, implemented using a custom made Lottie system and Webflow's native interactions. These animations helped transition between ideas, emphasize CTA zones, and add dimension to static content.

4. Implementation in Webflow

The entire site was developed and optimized within Webflow, ensuring full responsiveness, fast load times, and flexible content management for future updates.

We started by exploring rough ideas in Figma, testing layouts, flows, and building quick placeholder scenes. These early experiments helped shape the direction.

The breakthrough came with the concept of "breaking barriers" Teams often work in isolated bubbles, and Linero exists to dissolve those divisions, making feedback and alignment more natural.

Once the core idea was clear, visual development became more focused. Now we have to big blocks

The Team

The Bubbles

I won't get too technical but will brush over some generally interesting bits of the projects. But it's safe to say that the 3D scenes were a pretty wild ride. We went through a ton of different setups, just trying to lock in the exact vibe we were aiming for. It wasn’t just about making things look nice, but about explaining what Linero does in a somewhat abstract way.

I took a pretty unconventional approach to the characters.

Instead of manually posing them, I grabbed animation sets and froze the characters mid-action. So what you’re seeing aren’t just people standing around—they’re frozen moments, like snapshots of motion paused in time. It gives the whole thing a sense of movement, even though nothing’s actually moving.

Strange method, but it worked.

With the character system in place and the animation technique defined, we began developing the first scenes. This phase was about more than just aesthetics—it was about capturing intent. Each pose, interaction, and environment had to align with the broader narrative of Linero: enabling clarity, communication, and growth within teams.

We explored a range of setups, from isolated focus pods to dynamic team interactions. Every detail, the tilt of a character’s head, the positioning of a chair, the proximity of objects was adjusted to suggest a purpose. The goal was to make static images feel alive, to suggest motion and intention without actual animation.

One of the most time-intensive parts of this project was exploring 3D scenes. It’s especially demanding when working with complex compositions—multiple characters, distinct poses, layered environments all while trying to capture a conceptual idea. Each variation had to communicate both motion and meaning, making early experimentation critical but costly in time.

Haven't even mentioned render times lol.

After countless iterations, I finally locked in a scene that captured the essence that was targeted, expressive, and conceptually clear. With the core visuals finalized, the focus shifted to preparing assets for web integration.

This meant optimizing render quality, exporting elements for responsiveness, and setting up the development environment to handle the animation and interactivity needed for a seamless site experience.

Now its time to prep for Webflow use, the idea is to use Webflow's lottie feature to control the entire setup, this would mean, converting the animation to a image sequence ready and then making it into a lottie file:

I started by rendering two separate PNG sequences: 250 frames for the main 3D scene and 100 frames for the hero section. This totaled 350 high-resolution frames.

The sequences were then processed in Blender’s compositor. I applied denoising, made color adjustments, and aligned elements as needed. The final output was exported again as a cleaned-up PNG sequence.

In Mobile and Desktop compatible formats.

Each PNG frame averaged around 600KB. With 350 frames, that totaled over 200MB of assets per page load, far too large for web use.

To cut down size, I converted the entire sequence to WebP format. This dropped the average frame size from ~600KB to ~50KB, cutting the total size down to ~16MB per page load, not amazing, but manageable.

Our initial plan was to use Bodymovin to create a Lottie animation for web deployment. But Bodymovin/AE doesn’t support WebP, which blocked us from using the optimized sequence directly.

I tested manual solutions like LottieLab and the LottieFiles editor, but they weren’t practical for bulk frame handling.

I built a custom tool.

You upload a ZIP file containing the numbered image sequence. The tool generates a valid Lottie JSON animation using the images.

Simple, efficient, and exactly what was needed to bring the animation into production without bloating load times.

I used Webflow’s native Lottie animation support, which allowed us to import the JSON file directly and bind it to scroll and hover triggers. For the hero section, I set the animation to play based on scroll position, syncing visual motion with user input for a more immersive feel.

To ensure performance, the Lottie file was lazy-loaded and only initialized once it entered the viewport. I wrapped the animation in a lightweight container and used conditional visibility to disable playback on low-performance devices.

I also tested rendering quality across browsers, screen sizes, and pixel densities. Minor tuning of playback speed and easing curves helped align the animation with the pacing of the surrounding layout.

I also worked in some Lottie animations to bring extra life to key transitions. Nothing too flashy—just enough to guide the scroll and add a bit of rhythm to the experience. Combined with the 3D scenes, it helped make everything feel more connected and alive without overloading the page.

Distinct Brand Identity: The soft, surreal aesthetic paired with purposeful motion gave Linero a visual identity that stands apart in the crowded AI and HR tech landscape.

Engaging User Experience: The animation layers and visual metaphors help communicate complex ideas simply and intuitively.

Built for Growth: The site is easily scalable for new features, products, or team updates.

The Linero.ai project is a blend of storytelling, design fidelity, and technical nuance. It exemplifies how immersive design can amplify product value and position a brand at the frontier of its industry. I also deeply enjoyed expanding beyond what is typical—pushing past standard SaaS visuals to craft a digital experience that feels both elevated and intentional.