← Animation Examples Locomotive Scroll

Blake+DuCharme · Parallax · data-scroll + data-scroll-speed

Design and code, slightly out of sync on purpose

Alison Blake leads visual design—systems, typography, art direction. Peter DuCharme ships the stack—performance, accessibility, the weird edge cases. Only this headline line uses scroll speed; the rest of the page moves at normal pace, like a creative director walking ahead while engineering catches up with the truth. Keep scrolling for attribute labs, story beats, and the long sticky columns where Blake+DuCharme shows how editorial sites should feel.

Locomotive v5 · Blake+DuCharme build notes

Attribute lab — how we wire scroll

Blake+DuCharme is the studio where Alison Blake’s design craft meets Peter DuCharme’s engineering discipline—brand sites, product launches, and the occasional “can we make the scroll feel cinematic?” These cards use Locomotive’s data attributes only (no CSS view timelines on this page). Open assets/demo.js to see how data-scroll-call and data-scroll-event-progress map to window listeners—handy when we hook analytics, lazy media, or hand-off cues to a CMS. Migration guide (data attributes). Also in the guide: data-scroll-position (Lenis-relative placement), plus JS-only scrollCallback, lenisOptions, scrollTo, and resize()—all part of how we keep client sites smooth after launch.

data-scroll-class + data-scroll-repeat

When a Blake+DuCharme case study block crosses the viewport, Locomotive toggles the class you pass in—think “chapter online” for Alison’s layout beats. With data-scroll-repeat, leaving and re-entering fires again so Peter can reuse entrance animations when reviewers scroll up to compare revisions.

data-scroll-css-progress

Locomotive writes --progress (0 → 1) on this element while it moves through the viewport—perfect for scrubbing a hero treatment or a timeline of launches. The bar below uses transform: scaleX(var(--progress)) on a child (the variable inherits), the same pattern we use for progress indicators on long agency decks.

data-scroll-event-progress

Same progress as a CustomEvent (here: locoAttrsProgress). The readout updates from JS while this block is in range—imagine syncing copy reveals to Peter’s data layer or Alison’s Figma spec IDs.

progress: —

data-scroll-call

Dispatches a named event on window with detail.target, detail.way (enter / leave), and detail.from—ideal for play/pause on ambient video, analytics for case-study depth, or nudging a CMS preview when Blake+DuCharme sections enter view.

call: —

data-scroll-offset

Adjusts the intersection root margin (same bottom,top string idea as v4). This card is tuned to light up a bit earlier than the default trigger—like when Alison wants a headline to breathe before the fold catches up, or when Peter needs a component to arm before the user overscrolls.

data-scroll-speed (negative)

Negative values move opposite to positive parallax—design drifts one way while engineering argues the other: this span drifts the other way while the rest of the line stays normal, a tiny metaphor for critique meetings at Blake+DuCharme.

data-scroll-enable-touch-speed

Parallax is skipped on touch by default. This opt-in keeps speed on phones—because clients still thumb through launches on the train, and we want Alison’s parallax moments to survive Peter’s performance budget: touch-friendly parallax.

Blake+DuCharme · Storytelling patterns

Case-study rhythm: type, proof, and motion

Same Locomotive data-scroll-* hooks as the attribute lab—arranged the way we pitch a digital agency: chapter openers for Alison’s narrative, emphasis spans for Peter’s technical footnotes, a pull quote from a client, a hero still that earns its pixels, stats that feel earned, and a delivery timeline that mirrors how we actually ship.

Studio kicker · data-scroll-class on a wrapper

Blake+DuCharme builds brands the internet can feel

Alison Blake shapes the story—visual identity, interaction design, the quiet confidence of a grid that knows its job. Peter DuCharme makes it real—semantic HTML, resilient CSS, JavaScript that fails soft and telemetry that tells the truth. Locomotive adds story-inview to this wrapper so the kicker, display, and dek can stagger in like the opening beat of a new business deck.

Split parallax · two voices

Alison: systems, taste, typography Peter: performance, APIs, polish

Two data-scroll-speed values on sibling spans give a gentle split-depth headline—no scroll timeline required, just the feeling that design and engineering are in conversation as you move down the page.

Body · inline emphasis

Most of this paragraph scrolls at normal speed while you read about retainers, workshops, and the occasional sprint where we prototype something slightly unreasonable—then make it reasonable. When the highlighted clause crosses the trigger, Locomotive toggles a class on that span only—useful for glossary terms, pricing footnotes, or turning a phrase into a “button” moment for curious clients: Blake+DuCharme ships together so the rest of the sentence can stay calm while the emphasis carries the pitch.

“We did not want another template shop. We wanted a studio that could argue about type and argue about cache headers in the same meeting. Blake+DuCharme is that studio.”

— Composite client voice, story lab
Wide hero frame for Blake+DuCharme case study; clip and saturation follow scroll progress
data-scroll-css-progress on the figure: clip-path + saturation follow --progress as this frame crosses the viewport—think “reveal the boardroom wall” after Alison signs off on the still and Peter optimizes the asset pipeline.
Blake+DuCharme mood frame: scroll arc from soft blur through sharp color, grayscale beat, then clarity again
Stop (blurry) → blur to sharp → hold → sharp to blur (color) → color to B&W → resume (sharp color again). This strip is our “late night review” metaphor: the idea is fuzzy, then it locks in while Alison and Peter align, then pressure returns, then monochrome doubt, then full color confidence as the scroll run finishes. Progress runs on a tall sticky scrub (.story-filter-scene, ~255vh) so --progress advances slowly while the frame stays pinned. Entry is stretched: ~18% max-blur plateau, ~16% sharpen, then ~24% sharp hold; departure unchanged (~14% / ~12% / ~16%). Console: storyFilterProgress with ISO + performance.now().
CSS-only · blur & lift from --progress Scroll through this card—“launch-ready” sharpens from blur as progress climbs, like a metric we refuse to fake.
JS from data-scroll-event-progress 0 sprints counted Same progress signal as the attribute lab—here it drives a number so you can feel how far you have moved through the Blake+DuCharme “delivery story” without breaking the layout.

Delivery timeline · per-beat in view

  1. Discovery & positioning

    Alison leads workshops; Peter audits the stack. Class toggles when this row enters so the rail can glow—your stakeholders feel progress before a single component ships.

  2. Design systems & build

    Figma libraries meet Git branches. Each step repeats if you scroll away and back—handy when Blake+DuCharme revisits a chapter after client feedback lands on a Friday.

  3. Launch & iteration

    Combine with data-scroll-call to fire analytics, CMS hooks, or a tasteful sound sting when the final beat hits—Peter approves only if it respects reduced motion.

Blake+DuCharme — read the full pitch

This layout is a stress test: the headline stays fixed in its column while the opposite column carries a long agency narrative—Alison Blake on craft, Peter DuCharme on implementation, and Blake+DuCharme on why cool digital work still needs a spreadsheet somewhere. Keep scrolling until the last line releases the title.

Blake+DuCharme is a digital agency built on a simple partnership: Alison Blake translates ambiguity into design systems you can recognize in the wild, and Peter DuCharme turns those systems into code that survives traffic spikes, accessibility audits, and the inevitable “small tweak” that is not small. Together they ship brand sites, product marketing experiences, and the interactive stories clients quote in board meetings.

Alison’s side of the studio obsesses over rhythm—how a headline breathes against photography, how a component library keeps its nerve when marketing adds a fourth CTA, how motion supports hierarchy instead of decorating it. She sketches in broad strokes first, then tightens until every token has a name and every breakpoint has an opinion.

Peter’s side of the studio obsesses over truth—what the network actually does, what the bundle actually weighs, what Lighthouse actually reports when nobody is watching. He prefers boring technology deployed brilliantly over clever technology deployed nervously. If a scroll effect ships, it ships with fallbacks and with respect for reduced motion.

When a client asks for something “really cool,” Blake+DuCharme treats that as a design brief and an engineering constraint at the same time. Cool without performance is a prototype; performance without taste is a dashboard. The agency’s best work happens where those constraints argue and then agree.

Workshops usually start with Alison pinning mood, narrative, and visual metaphors to the wall—sometimes literally—while Peter maps content models, edge cases, and integration points. By lunch, the room has both a story arc and a risk list. By week’s end, there is a prototype that already feels like the final site, which saves everyone money and nerve.

Handoff is not a cliff. Designers get annotated components; engineers get specs that include empty states, loading skeletons, and the “forgot password” path nobody wants to photograph but everybody will use. Blake+DuCharme documents the boring parts with the same care as the hero animation, because launches are won in the margins.

The studio is deliberately small. Alison and Peter keep a short bench of collaborators—writers, illustrators, 3D partners—so every project still feels like a studio signature, not a staffing matrix. Clients notice when the same names answer Slack on week six as on week one.

Accessibility is not a line item. It is how Blake+DuCharme defines quality—contrast, focus order, keyboard paths, captions, and language that does not insult the reader. Peter ships automated checks in CI; Alison audits the experience the way she would audit typography: with patience and sharp eyes.

Performance is also not a line item. It is part of brand trust. A slow “premium” site reads like a luxury car that will not start. The agency budgets for image pipelines, font loading, and the unglamorous work of splitting critical CSS so first paint still feels intentional on mid-tier phones.

Content systems matter. Marketing teams should be able to publish without breaking the grid Alison defended or the components Peter hardened. Blake+DuCharme often pairs a headless CMS with guardrails—schemas, previews, and editorial hints—so creativity stays free without the layout turning feral.

Motion is used sparingly and meaningfully. Locomotive-style smooth scrolling appears in demos like this one because it showcases choreography, but production decisions always defer to user preference and device reality. If a motion idea cannot justify itself in one sentence, it does not ship.

Analytics and privacy get a seat early. The agency implements measurement that respects consent banners and regional law, then reads the data like a design critique: where do people stall, where do they return, where does the story actually convert? Numbers inform the next iteration; they do not replace taste.

Maintenance retainers are framed as partnership, not insurance. Blake+DuCharme would rather tune performance after launch than disappear until the next redesign emergency. Peter watches error budgets; Alison watches whether the brand still matches how the company speaks in the world six months later.

Internationalization shows up when it matters—rtl layouts, string expansion, date formats—because “we will fix that later” is how launches grow accents they cannot support. The studio plans for translation width the same way it plans for photography crops: as part of design, not as a patch.

Security reviews are part of the creative process. Forms, auth flows, and third-party embeds all get threat modeling appropriate to the client’s exposure, not theater. Peter prefers fewer dependencies with clear provenance; Alison prefers fewer login walls between the reader and the story.

Visual QA is a ritual. Alison compares staging to Figma at multiple breakpoints; Peter compares staging to production configs and caching headers. They meet in the middle with a shared checklist that ends only when both signatures are on it—sometimes metaphorically, sometimes in the issue tracker.

Blake+DuCharme still gets excited about typography. A great digital agency should be able to talk about x-height and cumulative layout shift in the same breath, because readers feel both even if they cannot name them. Alison picks type; Peter ensures it loads without jank and fallback stacks that do not lie.

The studio’s portfolio is a mix of cultural institutions, ambitious startups, and established brands refreshing for a new decade. What ties the work together is restraint: fewer gimmicks, more clarity; fewer plugins, more purpose; fewer buzzwords, more proof in the scroll.

If you read this far in the sticky column demo, you have simulated what it feels like to sit with Blake+DuCharme through a long brief—patient copy, alternating voices, and a layout that keeps the thesis visible while the evidence piles up. That is intentional. Alison wrote the rhythm; Peter built the rails.

When the headline finally releases, you have reached the end of this stress test. The next sections showcase horizontal passes and paired media columns— more motion patterns the agency uses when a case study needs scope beyond a single column of truth.

End of column—the fixed “Blake+DuCharme” headline unlocks once this block scrolls out of the layout area, which is your cue that the narrative column did its job.

Blake+DuCharme · Scroll-driven layout

Case-study frame: in from the right, hold, exit left

Below, the panel is pinned while you move through a long scroll span—like when Alison wants a single hero photograph to carry an entire chapter of copy. The image and caption track a view timeline: they travel in from the right, settle while you read the middle of the scrub, then continue off to the left as if the next section demanded the stage. Peter uses this pattern sparingly on production sites; when it ships, it ships with reduced-motion fallbacks and content that still makes sense if motion is off.

Blake+DuCharme mood board still for horizontal scroll pass demo

This caption rides with the image—same choreography: enter from the right, hold while you keep scrolling through the pinned beat, then exit left as the section completes. Imagine it is the pull-quote for a Blake+DuCharme rebrand story: one strong visual, one line of truth, no clutter.

Blake+DuCharme · Mirror pass

Same energy, exits the way it arrived

Same sticky scrub as the previous section, but the motion returns off the right edge—useful when Alison wants a cyclical metaphor—iteration, feedback loops, agile sprints—without dragging the reader’s eye across the entire viewport. Peter mirrors the timeline math so both passes stay maintainable from a single set of CSS tokens in the real codebase.

Second Blake+DuCharme frame for return-right scroll demo

Enters from the right, holds in place while you scroll through the middle of the track, then eases back off the right where it arrived—like a design review that ends where it started, but with clearer decisions.

Blake+DuCharme · Paired scroll

One sticky frame, three chapters of the same studio

The right side is one long read split into three beats—Alison’s craft, Peter’s engineering, and Blake+DuCharme’s culture. The left side is a single sticky slot: as you finish each beat, that photograph slides off to the left and the next image slides in from the left for the following chapter—same motion, new evidence each time.

Beat one: Alison Blake design direction mood imagery
Beat two: Peter DuCharme engineering and systems imagery
Beat three: Blake+DuCharme agency collaboration imagery

Pass 1 of 3 · Alison Blake — design

Alison Blake treats design as a decision log, not a decoration pass. She starts with language—what the company says in elevators, what it avoids saying on the record—then translates that into typography, color, and spatial rhythm. Her comps assume real copy, not Greeking, because Blake+DuCharme pitches with the same honesty the studio expects from clients.

In workshops, Alison is the person who redraws the whiteboard when the conversation drifts. She names tensions: premium vs. approachable, editorial vs. product-led, bold vs. institutional. Those tensions become axes in the system, not footnotes in a PDF. By the time engineering sees the file, the grid already knows how to behave when marketing adds a fourth module nobody planned for.

Interaction design under her direction feels calm. Buttons look clickable because hierarchy is clear, not because they glow like slot machines. Motion is choreographed in small loops—hover, focus, handoff—so Peter can implement with CSS first and JavaScript only when the behavior truly needs it.

She cares about photography the way editors care about ledes: crop, tone, and sequence either support the argument or they delete themselves. Blake+DuCharme often art-directs custom shoots rather than defaulting to stock libraries that make every SaaS site look like cousins at a reunion.

Accessibility shows up in Alison’s work as contrast choices you do not have to squint to approve, type scales that survive user font settings, and components that still make sense when translated into languages that run longer than English. She does not treat WCAG as a QA gate at the end; she treats it as part of taste.

Design QA, in her vocabulary, includes “does this still feel like the brand when the Wi-Fi is bad?” If the answer is no, the layout is not done. She will happily spend an hour tightening line breaks so a headline survives narrow viewports without orphaning its confidence.

When clients ask for “something cooler,” Alison asks what cool means for their audience—not for Dribbble. Sometimes the answer is restraint: fewer gradients, more whitespace, sharper photography. Sometimes it is play: a typographic moment, a scroll beat, a sound design sketch she knows Peter will budget realistically.

End of beat one—the sticky photograph beside this column should slide away left as you approach the next eyebrow, clearing the slot for a chapter about how Peter DuCharme turns these intentions into code that survives launch week.

Pass 2 of 3 · Peter DuCharme — engineering

Peter DuCharme writes the kind of code reviewers call “boring,” which is his favorite compliment. He prefers explicit modules, predictable data flow, and tests that fail loudly before a client ever sees a white screen. At Blake+DuCharme, engineering is not a translation layer from Figma to React; it is part of the creative argument about what is possible on the open web.

Performance budgets start early. Peter sizes images, subsets fonts, and argues for fewer third-party embeds with the same energy other people argue for brand colors. He ships Core Web Vitals improvements that never become slides because they are simply how the site behaves when nobody is demoing it on conference Wi-Fi.

Accessibility is implemented, not declared. Keyboard traps get fixed before launch, not after a Twitter thread. Focus rings are designed with Alison so they look intentional instead of like a browser default apology. Screen reader labels are written by humans who read them out loud and wince when they sound robotic.

Security and privacy show up in form validation, in how tokens are stored, in how analytics respect consent. Peter assumes attackers read documentation too, so he keeps dependencies lean and provenance clear. When Blake+DuCharme integrates a CMS, he thinks about editor roles, audit trails, and rollback paths—not just the happy path demo.

He likes Locomotive-style smooth scrolling in demos because it shows what careful motion can do; in production he pairs it with reduced-motion media queries and content that does not depend on scroll position to make sense. The agency’s reputation lives in those details.

Handoff to internal client teams includes README files people actually read: how to add a module, how to preview before publish, what to do when the build fails because someone pasted a 12-megabyte PNG from a phone. Peter would rather write that doc once than answer the same Slack at midnight six times.

Second beat complete; the third image inherits the sticky slot for a shorter chapter about how Blake+DuCharme behaves when the lights are on and the client is watching.

Pass 3 of 3 · Blake+DuCharme — the partnership

Blake+DuCharme is not a merger of two freelancers with a shared calendar. It is a studio model where design and engineering negotiate scope in the same room, on the same timeline, with the same definition of done. Alison brings the story; Peter brings the stack; the client gets a site that feels expensive because the details compound instead of fighting each other.

The agency’s culture is unsentimental about trends. If a pattern is everywhere, Blake+DuCharme asks whether it belongs on this brand—not whether it will win awards. Cool is allowed, but only when it clarifies positioning instead of distracting from it.

Retainers are framed as continuous improvement: analytics reviews, accessibility sweeps, performance budgets that evolve as traffic grows. The studio would rather tune typography after launch than vanish until the next redesign emergency—relationships over transactions, craft over churn.

When things go wrong—and they sometimes do—Blake+DuCharme communicates early, documents clearly, and fixes without blame theater. Alison updates the client on design tradeoffs; Peter updates them on technical tradeoffs; both sign the same postmortem with action items instead of excuses.

New business begins with fit. The studio turns down work that expects miracle timelines or unlimited free pitches, because that work would force corners that neither Alison nor Peter is willing to cut. They would rather be slightly harder to hire and much easier to trust.

Deliverables are packaged like a studio product: design tokens, component references, CMS schemas, deployment notes, and a short film of the scroll experience for stakeholders who will never open DevTools. Blake+DuCharme wants the client team to feel proud handing the site to the next hire—not anxious about which Slack channel holds the truth.

If you scrolled this third beat to the end, you have watched the paired-column demo do its job: three photographs, one sticky frame, each exit clearing space for the next entrance—same choreography Blake+DuCharme uses when a case study needs scope without losing the thread.

Three beats, three images, one sticky frame—each photo leaves left before the next arrives from the left, and the studio moves on to the next launch with the same rhythm.