Rotating drum

What's included

A complete services section: four cards, a heading, and between them a 3D drum. Eight pill-shaped blades hang from a single horizontal hinge, 45° apart; scrolling the page turns the whole assembly about that axis, so the blades rise, face you, then tip out of frame.

Two files: a stylesheet and a script. No dependencies, no build step, no external requests. The script writes a single value into the page — --sd-angle — and the whole of the rest of the drawing follows from it. Both fonts are bundled locally.

Features

• The rotation follows the crossing, not the pixels — the drum turns through 102° between the moment the stage enters at the bottom and the moment it leaves at the top. So the run is the same on a phone and on a large screen, whatever the height of the window.
• A blade squarely facing you halfway through — the phase and the amplitude are chosen together so that when the stage is centred, the angle is exactly 90°, a multiple of the blade spacing. That isn't a lucky setting.
• Works without JavaScript — without the script, the drum settles at its resting angle, that very one, and the eight words stay a list read in order.
• One variable for the scale — every measurement derives from --sd-font-size: the stage, the blades, the perspective and the notch all follow together. The 3D drawing included, not just the text.
• Two ways to drive it — data-drive="scroll", the default, indexes the angle on the crossing of the window. data-drive="time" turns it at a constant speed, for places where nothing scrolls: a preview frame, a modal, a fixed panel. That's the mode driving the view above.
• Adjustable inertia — data-ease runs from 0 (the drum sticks to the scroll position) to 1. The value can change later: the component reads its own attribute back.
• Reduced motion respected — under prefers-reduced-motion, the drum stops following the scroll and settles on its facing blade. The gradient and the shape stay: they're an image, not a movement.

Dropping it into a page

Two files to load, then the stage and its eight blades:

<link rel="stylesheet" href="rotating-drum.css">
<script src="rotating-drum.js" defer></script>
<section class="rotating-drum" data-rotating-drum data-ease="0.14">
  <!-- data-drive="time" instead, where nothing scrolls -->
  <div class="rotating-drum__stage" data-rotating-drum-stage>
    <div class="rotating-drum__viewport">
      <ul class="rotating-drum__drum" data-rotating-drum-axis>
        <li class="rotating-drum__blade">
          <span class="rotating-drum__pill">
            <span class="rotating-drum__word">Framing</span>
          </span>
        </li>
        <!-- sept autres lames -->
      </ul>
    </div>
  </div>
</section>

The three data-* attributes are enough: the component installs itself on load. The cards around it are ordinary markup, they arrange themselves around the stage.

What you should know

• It takes some run to see it turn. The rotation is indexed on the crossing of the window: in a frame that doesn't scroll, the drum stays at a fixed angle. That's deliberate — it's what makes the preview above readable — but a page where the component fills the screen with nothing above or below it will show almost nothing.
• Blades facing away show their word mirrored. That's what a rotating solid does, and it's the reference's behaviour. To keep only the front faces, there's data-backface="hidden" — at the cost of an emptier top half.
• The drum isn't a control. It doesn't take focus and exposes no role: it's decorative motion. The eight words themselves are a plain list in the document, read whatever happens.
• No inline styles, no inline scripts. The script goes through the CSSOM, which a strict security policy allows where it refuses a <style>tag. Checked by serving the folder over HTTP with the site's header, not assumed.
• The design comes from elsewhere. The proportions and the rotation curve were taken from a commercial Webflow template, measured on the live site. The code is original and the words are ours: nothing was taken from its implementation or its copy.