Additional media work — brands & campaigns — available upon request.

Brand & launch site2026

Cyclery Racing

Most team websites apply a brand. This one performs it.

Visit project

The project.

Cyclery Racing is a Canadian women’s professional cycling team. They had an aging, paid WordPress site that didn’t look like the athletes it represented. I designed and built its replacement end to end — identity, interaction, and front end — as a single custom build they own outright, with the polish they’d associated with tools like Framer or Webflow and none of the monthly fee.

I treated the brand as something the page does, not just something it shows. The energy of the team — fast, deliberate, alive — lives in how the site behaves: an entrance that counts itself up before it lets you in, a cursor that reacts to where it is, stats and races that come to life as you move through them. Design and code weren’t two phases here. They were the same act.

The idea.

The hard part of a brand site isn’t decoration — it’s making identity legible through behavior. I wanted the first ten seconds to feel like the team: motion with intent, nothing idle. So the interaction model became the brand expression. The site doesn’t have animations bolted onto a layout; the animation is how the layout means what it means.

The craft.

Where the idea becomes real — four moments you can actually feel.

  1. 01 · craft

    A cursor that pays attention.

    A custom pink dot that follows with eased motion and changes state by context — expanding over interactive zones, going light over dark sections — driven by data attributes in the markup so the design language and the behavior stay in sync. It steps aside entirely on touch and for anyone who's asked for reduced motion.

    Hover anywhere

    cycleryracing.ca

  2. 02 · craft

    An entrance that earns the wait.

    A splash that counts from 000 to 100 on a custom easing curve, holds, then lifts away — built by hand with requestAnimationFrame, locking scroll until it's done so the first moment is composed, not chaotic.

    000Loading the team

  3. 03 · craft

    Interaction that respects the device it's on.

    On desktop you hover a card and it opens. On a phone — where hover is a lie — the same component watches your scroll and lights up whichever card is at the center of your screen. Two different ways to feel the same content, each native to the hand holding it.

    Desktop · hover to open

    Rider 01Open profile →
    Rider 02Open profile →
    Rider 03Open profile →

    Mobile · whichever card is centered

    Rider 01Centered →
    Rider 02Centered →
    Rider 03Centered →

  4. 04 · craft

    Reveals with rhythm.

    Sections arrive as you reach them, with direction and timing I can tune per element — a small, reusable motion vocabulary I wrote once and used everywhere. (You're scrolling through it right now.)

    Reveal cadence

    Section title arrives first.

    Then the body, a beat later.

    Then the meta, quieter.

    each element on its own delay — same easing across the whole site.

The making.

I built the motion system myself instead of pulling in a library. Every reveal, the cursor, the splash, the scroll behavior — hand-written, on IntersectionObserver and requestAnimationFrame, which kept the whole thing at four runtime dependencies and kept performance a default rather than an afterthought: properly sized images, passive and throttled scroll, GPU-friendly transforms, no webfont round-trip. The reveal logic is a single reusable hook and wrapper the pages consume, and the color language is defined once as design tokens. Built in Next.js and React with TypeScript; shipped on Vercel.

It’s not a tech demo. It’s a real site, for a real team, that real people use.

Next.jsReactTypeScriptGSAPVercel

It works where it matters.

The audience is on their phones; the build was designed for that from the first decision.

0%

of visitors arrive on mobile.

0

Instagram is the top referrer — ahead of Google.

0%

of traffic is Canadian, for a proudly homegrown team.

How I work.

I don’t hand a design to an engineer or a build to a designer — I move between the two until the idea and the implementation are the same thing. I’ll write the motion by hand if that’s what gives me control over the feel, and I’ll cut the heavy tool if a lighter one ships a better experience. The launch is where I start paying attention, not where I stop: the first thing I added after this one went live was reduced-motion support, because motion you can’t opt out of isn’t craft, it’s noise.

Solo project — identity, IA, interaction, and build. The physical team race kit was designed separately. AI as an accelerator in my workflow; the decisions are mine.

Product site

Notto