Reform Collective: A New Web site, Designed to Be Seen

Reform Collective is a digital-first, full-service design and improvement company. We’ve been partnering with purchasers of all sizes for 11 years and going sturdy! We work with formidable groups constructing fascinating issues. If it doesn’t conflict with our ethics and also you respect our time, we’re in.

Design

Our earlier website was now not working for us. It didn’t replicate the form of work we had been doing, and extra importantly, it created friction. The navigation was convoluted, the construction too deep, and the visible model didn’t align with what we had been exhibiting purchasers in proposals or conversations. We’d share a mission we had been pleased with, and when individuals landed on the positioning, they both received confused looking for it or misplaced curiosity navigating a dated UX. It was time to maneuver on.

The redesign was a reset. We stripped the positioning right down to the necessities. Clear structure. Broad spacing. Minimal construction. The purpose was to create one thing that felt open, assured, and simple to maneuver by. We needed the expertise to replicate how we strategy shopper work: intentional, clear, and results-focused — all whereas telling a robust story.

We additionally made a aware choice to drag again on animation. Whereas we nonetheless use movement to assist interplay, we didn’t need it to take over the expertise. Efficiency and readability got here first.

Sharing Our Work

One of the deliberate modifications we made was how we current our work. Conventional case research are saturated with summaries, timelines, and course of write-ups. We realized that’s not how individuals eat portfolio content material anymore. They don’t learn. They scroll. They skim. They resolve shortly should you’re price their time.

So we stopped writing to be learn and began designing to be seen.

We eliminated all of the fluff: no intro copy, no technique breakdowns, no “right here’s what we discovered.” Simply clear visuals, concise mission titles, and frictionless searching. If the work can’t communicate for itself, it in all probability isn’t sturdy sufficient to be featured.

This shift wasn’t simply aesthetic. It was a strategic alternative. We needed to scale back noise and let the standard of the output stand by itself. The positioning isn’t there to promote. It’s there to indicate. And exhibiting means getting individuals to the work quicker, with out distractions.

The top result’s a portfolio that feels quick, direct, and unapologetically visible. No click on tunnels. No over-explaining. Only a clear runway to the work.

The Navigation

We designed the worldwide menu to really feel structural. As an alternative of floating over the positioning or fading in as a layer, it pushes the complete structure downward, bodily transferring the web page to make room. It’s a deliberate gesture. Spatial, not simply visible.

The movement is clear and architectural: a full-width panel slides down from the highest, snapping into place with precision. There’s no blur, no parallax, no visible fluff. Simply sharp distinction, daring typography, and three major paths: Our Work, About Us, and Reform Nova. These are anchored by lean sub-labels and a robust name to motion.

This isn’t a nav making an attempt to indicate off. It’s constructed to orient you shortly, body the expertise, and get out of the way in which. The selection to displace the web page content material relatively than obscure it reinforces how we take into consideration expertise design: create readability by introducing hierarchy, not noise.

It feels tactile. It feels intentional. And it displays how we construct: structural logic, tight movement, and a transparent sense of precedence.

The Nerdy Tech Particulars from Our Lead Engineer

Webby Award Part

I began with an AI prototype in v0 for the wavy traces background. v0 is surprisingly good at deciphering imprecise directions. I can actually inform it “make it goopier” and it’ll spit out code that makes issues really feel goopier. I ended up with a fairly snazzy prototype. As a result of it used react-three-fiber, I might principally copy-paste it straight into our code, set up dependencies, and be 80% achieved! A lot quicker and extra fascinating than organising a Three.js scene by hand, in my view.

I’ll say this workflow has its quirks, although. The AI is nice on the preliminary vibe test, however it chokes on particular suggestions. It’s fairly exhausting to explain visible bugs in textual content, and because the mannequin can’t see the output, it’s principally guessing more often than not. I additionally seen it tends to “over-edit,” typically refactoring a complete part for a tiny change. I ended up fixing a number of bugs myself as a result of v0 simply couldn’t deal with them.

The following half was the mouse follower. I needed a video that follows the cursor, showing over the wavy background however below the header textual content. Because it passes behind the textual content, the textual content’s coloration inverts so it stays seen.

The “following the mouse” half was simple! The inversion impact was a bit trickier. My first thought was to make use of mix-blend-mode paired with backdrop-filter. It appeared like an amazing thought and may have labored completely—or at the very least, that’s what I’d say if it truly had. I ended up making an attempt all types of random approaches to seek out one thing that labored throughout each browser. Main upside: I received to justify all my displays by placing a special browser on every whereas coding.

The breakthrough got here after I stopped making an attempt to make one factor do the whole lot. I break up the impact into two completely synchronized divs:

1. The <Inverter>: A ghost div with no content material. Its solely job is to hold the backdrop-filter: invert(1) that flips the textual content coloration.
2. The <Video>: This holds the precise video. It’s positioned in a decrease stacking context utilizing z-index: -1, so it slides beneath the textual content however stays above the web page background.

I used GSAP’s quickTo to animate them each in sync. To the consumer (that’s YOU), it seems as a single factor. It appears like a little bit of a hack, however it works flawlessly throughout all browsers.

Right here’s the gist of it:

// animate each refs on the similar time so they seem as one factor
const moveX = gsap.quickTo([videoRef.current, inverter.current], "x", { /* ... */ });
const moveY = gsap.quickTo([videoRef.current, inverter.current], "y", { /* ... */ });

// within the JSX
<Wrapper>
    {/* different content material right here, ofc */}
    <Video ref={videoRef} {...video?.knowledge} />
    <Inverter ref={inverter} />
</Wrapper>

// and the kinds...
const Video = styled(BackgroundVideo, {
    place: "fastened",
    zIndex: -1, // pushed behind the textual content
    filter: "invert(1) distinction(0.5)",
    /* ... */
});

const Inverter = styled("div", {
    place: "fastened",
    pointerEvents: "none", // for textual content choice
    backdropFilter: "invert(1) distinction(2)",
    /* ... */
});

The kinds right here use https://www.restyle.dev/, by the way in which — it’s a runtime-only CSS library (i.e., no bundler config required), which is fairly cool.

Nova Blocks Part

This function is a scroll-driven animation the place a grid of 3D blocks zooms previous the digicam. The enjoyable half is that it’s all achieved with pure CSS transforms—no WebGL or threejs wanted.

The setup includes a container with perspective and a bunch of “block” divs, every utilizing transform-style: preserve-3d. Every block incorporates a number of baby divs rotated into place to kind a dice. For efficiency, I solely animate the mother or father block’s rework, which is extra environment friendly than transferring lots of of particular person faces. I used the MDN demo dice for inspiration on this one.

In fact, doing this led me straight into the bizarre world of browser bugs. (I appear to finish up there quite a bit…)

1. Safari’s Rendering Glitch:

Safari was z-fighting like loopy. It will randomly render faces that ought to have been occluded by an adjoining dice, which seemed horrible. See web-bugs/points/155416. The repair ended up being twofold:

• Guide Culling: As an optimization, I used to be already rendering solely the faces that will be seen primarily based on the dice’s grid quadrant. That is principally handbook back-face culling, which helped scale back the variety of layers Safari needed to compute. It in all probability improves efficiency anyway, so… thanks, Safari, I assume.
• Compelled Stacking: I’m assigning every dice a selected z-index primarily based on its row and column. It feels a bit brute-force, however it tells Safari precisely the way to stack issues—and it fully eradicated the glint.

Right here’s the gist of the Block.tsx part:

export default perform Block({
  vertical,
  horizontal,
  row,
  column,
}:  "proper";
  row: quantity;
  column: quantity;
) {
  // Explicitly set z-index primarily based on grid place to stop z-fighting in Safari
  // This was principally trial and error to determine
  const model =
    vertical === "high" && horizontal === "left"
      ? { zIndex: -row - column }
      : vertical === "backside" && horizontal === "proper"
        ? { zIndex: -1 }
        : horizontal === "left"
          ? { zIndex: -column }
          : { zIndex: -row };

  // Conditionally render solely the mandatory faces
  return (
    
      {horizontal === "left" && }
      {horizontal === "proper" && }
      {vertical === "high" && }
      {vertical === "backside" && }
    
  );
}

const Wrapper = styled("div", {
  transformStyle: "preserve-3d", // the magic property for the dice
  /* ... */
});

2. Firefox’s Pinning Downside

Our website makes use of CSS Subgrid for international alignment, which is superior in my view as a result of it narrows the hole between design and improvement. If one thing within the design is aligned to the grid, it will possibly now be actually aligned to the grid within the code too.

Caveat: I discovered that in Firefox, place: sticky was fully damaged inside a subgrid container. A pinned factor would begin pinning however by no means unpin, as a result of its positioning context was being resolved to the mistaken grid container.

After I remoted it in a CodePen and reported the bug (web-bugs/points/152027), the repair was merely to take away subgrid from the sticky factor’s mother or father and apply the grid kinds straight.

Working into bizarre bugs is irritating, however it’s a part of the deal if you’re constructing cool issues. You simply should plan for it in your timeline. And should you discover a bug in some unusual edge case, I’m a giant advocate for taking the time to create a minimal check case and report it. It helps pinpoint precisely what’s going mistaken, which results in a greater resolution—and it helps make the online higher for everybody.

Thanks for studying!

Able to construct one thing with us? We’re all the time searching for nice firms and people to associate with on new tasks. Get began →

The Reform Co. Crew

P.S. We’re additionally hiring, be happy to take a look at our careers web page. ❤️