Reference gallery

What we’d borrow

Thick hand-drawn lines that draw themselves once when their section scrolls into view, then stay put behind the text. For Leap: one gradient squiggle per page, drawn once with SVG, partly cropped by the edge and kept behind the copy. No smooth-scroll library.

What we’d borrow

A wavy underline that drifts slowly under key words, made with a CSS mask. For Leap: a gradient squiggle underline that draws once under one key word per page, with an optional slow drift. We skip their loading-screen animation so content shows straight away.

What we’d borrow

A ribbon line that draws as you scroll, and little handwritten notes with arrows that gently jitter as if redrawn. For Leap: two or three margin notes in the handwriting font across the site, plus a once-only moment near the contact call to action where a line closes into the speech bubble. That morph is new design work; no reference shows it.

What we’d borrow

A large glowing blob that drifts across a dark hero, rendered in WebGL. For Leap: the same feeling rebuilt in plain CSS, a soft yellow-peach-pink-lilac blob on the off-white that drifts over 20 seconds, pauses off-screen and stays still for visitors who prefer less motion. Much lighter than WebGL.

What we’d borrow

Soft gradient glows behind small icons, and a warm gradient horizon at the foot of the page. For Leap: gradient icon chips on the six service cards, and a single gradient horizon behind the closing call to action, once on the site. A soft gradient card can also highlight one small section per page.

What we’d borrow

A wordmark filling the screen with sticker-style objects tucked between the letters. For Leap: a large but calmer hero headline with three small floating shapes from the brand (the bubble outline, a squiggle, a soft blob) drifting a few pixels. Used once, on the home page.

What we’d borrow

A headline that types, holds, deletes and types the next phrase, with a blinking cursor. For Leap: the main heading stays still and readable, and only the last phrase of the line below it types and changes (for example "We help brands find the right direction"). It stops after two rounds and is off for visitors who prefer less motion.

What we’d borrow

A hand-drawn ring around a "Since" date, and a consultation button that stays in the top bar. For Leap: a small "Since 2021" stamp in the handwriting font with a gradient ring that draws once (About page or footer), and the "Free consultation" pill always in the header. Their badge says 2022, so we'd like to confirm Leap's year.

What we’d borrow

Little animated characters around the page that open a speech bubble when you hover them. For Leap: no characters, but small gradient dots that grow into a speech bubble with a short reply on hover, keyboard focus or tap. Calm until you go looking, which suits "Less noise".

What we’d borrow

Small chat bubbles that bob gently in the hero. For Leap: three to five pastel bubbles with the logo's tail, carrying a handwritten word or a tiny glyph instead of emoji, floating slowly out of sync. The page also has a fixed WhatsApp button; we've asked Alexa which one she meant.