- What moves
- A choreographed, CSS-only entrance. Headline words and badges fade and lift on staggered delays, a status dot pulses, then sections snap in laterally and settle with a spring-like easing. A muted autoplay hero video loops behind it, with a marquee strip scrolling across. The feel is fast and physical, like everything snaps into place rather than just fading.
- Built with
- Next.js, pure
Tailwind CSSkeyframes and transitions with a customease-springtoken. No GSAP, no Swiper, no jQuery. - For us
- The model to copy. Premium motion with zero animation library, ideal for a static site. This is the "snap and settle" entrance in our playbook.
SEO Believer Competitor Best Practices
Internal build reference. Enter hub password to continue.
That's not right. Try again.
Competitor Best Practices: 50 Sites Annette Flagged
Fifty screenshots you curated from competitor sites, each with notes on what works in the section and what works on the page. Use this as the design and conversion checklist while we build SEO Believer.
Recurring best practices to adopt
- A free, named lead magnet front and center. The strongest sites give the offer a real name and capture the email right inside the hero, so there is almost no friction between landing and signing up. We should put our free audit offer in the same spot.
- Animated, benefit-driven heroes. Several sites use a search-box metaphor with benefit words rotating over video footage that matches each word, paired with one bold headline and a single call to action. The motion earns attention without adding copy.
- Proof-first, conversion-led design. Big stat numbers, star ratings with review counts, named case-study mockups, and real product screenshots do the selling. The proof leads and the pitch follows.
- Proof by content and borrowed authority. Walls of dated, read-time-stamped, category-tagged articles plus rows of tool and client logos and side-by-side comparison tables signal depth and credibility, even for a brand-new firm.
- Real faces build trust. Authentic human photography of the actual people, alongside independent review badges, reads as honest in a way stock imagery never does.
- The "search has changed" GEO hook. The sharpest sites open on the shift to AI search and position themselves as the answer, which is exactly the wedge our positioning is built on.
- Conversion psychology and transparency. A risk-reversal guarantee, an objection-handling FAQ accordion, transparent tiered pricing with the middle tier highlighted, and an inline booking calendar all lower the barrier to saying yes.
How the best ones move (and how to build it)
We captured the live motion on these sites and read what each one is actually built with. The pattern is clear, and it is good news for us. The premium feel does not come from a heavy framework. It comes from a handful of well-chosen techniques and careful CSS choreography. Here is the build plan I want our team to follow, and the parts I want us to leave on the shelf.
- HaveHero background video. A muted, autoplaying, looping clip behind the headline. We already run this on our site, and so does nearly everyone worth copying. It sets the tone the instant the page opens.
- AddA CSS-only staggered "snap and settle" entrance. This is the A3 Brands approach, and it is the most quietly impressive thing in the whole set. Headline words, badges, and section blocks fade and lift into place on deliberately staggered delays, with a spring-like easing so they settle rather than just appear. A3 pulls off the most premium feel in the cohort with no heavy animation library at all, just authored keyframes. That is exactly right for a fast static site like ours.
- HaveScroll-reveals. Sections that fade and slide in as you reach them. We already do this, and it remains the most common scroll device across the set.
- HaveCount-up stat numbers. Proof figures that tick up from zero when they scroll into view, the way Titan Growth and the Found case study do it. We already have this, and it makes the numbers feel earned.
- AddA Swiper testimonial and logo slider. This is the one real gap. A swipeable, auto-advancing carousel is the most common motion across every site we looked at, and we do not have it yet. Swiper is lightweight, well supported, and the right tool for rotating testimonials, client logos, and case-study cards without bloating the page.
- OptionalA marquee proof-strip. A row of logos or proof points that scrolls horizontally on a loop. King Kong leans on these heavily for a never-still feel. It is pure CSS and cheap to add, so it is a nice-to-have once the essentials are in.
- SkipKing Kong's bespoke WebGL globe and Wonderist's full GSAP ScrollSmoother suite. Both are genuinely gorgeous. Both are also heavy. Wonderist loads the entire premium GSAP toolkit plus smooth-scrolling, and King Kong renders a 3D globe in WebGL. Either one would slow down the very page we need AI to read quickly. We skip them on purpose.
Animation & how it's built, site by site
One row per site. What moves, what it's built with, and a quick verdict on whether it's worth building for us. Captured live on 2026-06-02 by reading each page's runtime libraries and motion hooks.
- What moves
- A silent autoplay hero video, then relentless horizontal motion: 28 marquee rows continuously scroll logos, awards, and review snippets. Lottie drives small looping icons, a WebGL canvas renders an interactive 3D globe, scroll-reveals ease blocks in, and a Swiper carousel rotates testimonials. High-energy and never still.
- Built with
- Custom JS front end.
Swiperfor the slider,Lottiefor vector loops, a bespokeWebGL globe, and roughly 28 CSS marquees. - For us
- Take the Swiper slider and the marquee strip. Skip the WebGL globe, it is gorgeous but heavy.
- What moves
- A silent autoplay hero video, then the standout: 30 number counters that count up from zero to their target as each stat block scrolls into view. Scroll-reveals ease content in and a couple of carousels rotate logos. Restrained and metric-led rather than flashy.
- Built with
jQueryplus CSS for the count-ups and reveals. Generic carousels. No GSAP, no Lottie.- For us
- All of it is buildable and on-brand. We already have count-up numbers and scroll-reveals, this confirms the recipe.
- What moves
- The most slider-driven page in the set: 22 Swiper carousels rotate testimonials, service cards, and logos. It adds 16 count-up stats, 11 parallax elements whose backgrounds drift at a different speed for depth, an ambient hero video that plays on view, and scroll-reveals.
- Built with
- WordPress.
jQueryplusSwiperfor the carousels. Counters and parallax are theme and CSS driven. - For us
- Take the Swiper sliders and count-ups. Go easy on parallax, it can hurt performance and feel dated if overused.
- What moves
- A polished agency homepage built on reveal-on-scroll: 55 elements fade and slide in section by section. Five muted autoplay videos give the hero and feature blocks ambient movement, and five Slick carousels rotate logos, work, and testimonials. Smooth and premium. On its case-study pages, big result numbers count up from zero as each metric lands as its own beat.
- Built with
- WordPress.
jQueryplusSlickcarousel, with scroll-reveal and count-up logic in a custom bundle. - For us
- The reveal-on-scroll rhythm and count-up case-study numbers are exactly our approach. We'd use Swiper rather than Slick.
- What moves
- Almost nothing, on purpose. A few elements fade in on scroll, one non-autoplaying video, and one small canvas drawing. No slider, no parallax, no marquee, no count-ups firing. The motion budget is intentionally tiny. It leans on typography and whitespace and uses motion as occasional punctuation.
- Built with
- WordPress, performance-tuned with WP Rocket.
jQueryplus hand-rolled CSS. No animation library. - For us
- The instructive counter-example. Our content gold standard is deliberately low-motion. Motion is polish, not substance.
- What moves
- Carousel-and-video heavy rather than scroll-choreographed. The page leans hard on Swiper, with auto-advancing sliders, logo and testimonial reels, and swipeable service carousels everywhere. Five muted autoplay videos supply ambient motion and a few marquee strips scroll content sideways.
- Built with
- WordPress with Bricks Builder.
Swiperfor every carousel plus native looping video and CSS marquees. No GSAP. - For us
- This is the Swiper-everywhere proof point. Take the testimonial and logo sliders, just don't overdo the count.
- What moves
- The most sophisticated build by a wide margin. Buttery inertial smooth-scrolling, character-by-character headline reveals and scramble effects, line-drawing and shape-morphing SVGs, throwable physics interactions, typewriter text, 34 count-up numbers, and 10 looping videos. A continuously choreographed page where text assembles and SVGs draw as you scroll.
- Built with
- Webflow with the full premium
GSAPsuite:ScrollSmoother, ScrollTrigger, SplitText, ScrambleText, DrawSVG, MorphSVG, plus Lottie, Typed.js, and Swiper. - For us
- Gorgeous, and far too heavy for a page we need AI to read fast. We borrow the count-ups (which we already have) and leave the GSAP suite alone.
- What moves
- A hero background video plus a set of carousels, with a handful of scroll-reveals and a few marquee strips scrolling sideways. Smooth but not flashy.
- Built with
Swiperfor the sliders alongsideGSAPand ScrollTrigger for the scroll work.- For us
- Take the Swiper sliders and the hero video. We can get the same reveals from light CSS without pulling in GSAP.
- What moves
- A muted autoplay hero video, a few count-up stat numbers, several carousels, and a handful of scroll-reveals. A tidy, conventional mix with nothing exotic.
- Built with
jQueryplus the lightweightSplideslider. No GSAP or Lottie.- For us
- Entirely buildable. Splide is a fine lightweight slider too, though we'll standardize on Swiper for consistency.
- What moves
- A hero background video, a few carousels rotating content, and a couple of scroll-reveals. Light and clean.
- Built with
jQueryplus the lightweightSplideslider.- For us
- Simple and buildable. Same recipe as ours: hero video, a slider, light reveals.
- What moves
- The lightest-motion site of the set. A single muted autoplay hero video carries the page, with just a few fade-in elements and tasteful CSS hover transitions on buttons and cards. No carousels, parallax, or count-ups. Clean and fast.
- Built with
- WordPress, tuned with WP Rocket. Plain CSS transitions plus one HTML5 hero video. No animation library at all.
- For us
- Proof that one hero video plus clean CSS hovers can carry a whole page. A safe, fast baseline we already meet.
- What moves
- The most dated build of the cohort. No animation framework at all. The only real motion is a couple of autoplaying looping background videos in the hero. Otherwise the page is mostly static aside from standard hover effects.
- Built with
- A legacy 2018-era custom WordPress theme.
jQueryplus CSS only. - For us
- The "do not copy" baseline. The one thing worth keeping, a hero video, we already have.
- What moves
- Not captured. The site returned an SSL certificate error (expired or invalid certificate) during the crawl, so the page would not load for analysis.
- Built with
- Unknown, capture failed.
- For us
- Worth a manual revisit once their certificate is fixed. An expired cert is itself a trust and SEO red flag.
Internal build reference · Private · 50 screenshots · ← Hub