Redesigning Steddi for speed

When we first built Steddi's marketing site, we reached for the usual tricks: animated gradient orbs, heavy blur filters, parallax effects. They looked nice on a MacBook Pro. They did not look nice on a three-year-old Android phone over a spotty connection.

This month we tore it all out and rebuilt the entire site with a single goal: make it fast. Not fast on paper. Fast on every device, for every user, on every network.

What we removed

The old homepage had six animated gradient orbs — large, blurred, absolutely positioned divs running CSS keyframe animations. Each one forced the GPU to composite a blurred layer on every frame. On mobile devices this burned through battery and caused jank during scrolling.

We also hid the dashboard screenshot's chart section on mobile. The donut chart SVG and the income-vs-expenses bar chart added a significant amount of DOM that was barely legible on a small screen anyway. Now mobile users see the summary cards only, which load faster and communicate the same information.

What we replaced it with

Every animated orb was replaced with a single CSS radial-gradient on the section's background. Zero JavaScript. Zero GPU animation. The visual effect is subtler, but it's intentional: the product should be the hero, not the background effects.

We switched every CTA button to pill-shaped (fully rounded) buttons, made them full-width on mobile for better tap targets, and added gradient text on the hero headline for a modern feel without any runtime cost.

Mobile-first, not mobile-afterthought

More than 60% of our visitors arrive on a phone. The old design had desktop-first padding (py-28, py-36) that wasted half the viewport on whitespace. We now start with compact mobile spacing and scale up at the md: breakpoint.

The feature preview section went from icon-only tabs on mobile (confusing) to full labeled tabs that fill the screen width. The How It Works section switched from vertically stacked centered cards to a compact horizontal layout with the step number and text side by side.

The nav got smarter too

The navigation bar now starts fully transparent, letting the hero gradient show through. It only adds the glass-morphism backdrop blur when you start scrolling. The scroll listener is throttled with requestAnimationFrame instead of firing on every pixel, which matters on lower-end devices.

Results

The new site ships roughly 100 fewer lines of code. More importantly, it eliminates the GPU-heavy blur animations that caused the most performance issues. Lighthouse scores improved, but what we care about more is how it feels: fast, clean, and focused.

We also added a testimonials section (people seem to like us), a social proof stats bar, and “by Steddi Labs” branding throughout. Because if you're going to rebuild something, you might as well make it better in every way.