July 27, 2026/Simple/About & Story/BeNorth.Studio ↗

BeNorth Tagline

Statement tagline section (BeNorth.Studio). The paragraph is split into word-level masks — each word an overflow-hidden inline-block whose inner span slides up from translateY(110%) with a continuous 22ms-per-word transition-delay cascade, triggered once by IntersectionObserver. Accent segments render in the brand orange via restyled em. A pill CTA fades up 0.5s later and, on hover, fills accent-orange while its arrow flies out diagonally and swaps back in (pillArrow keyframes). Hairline top border, descender-safe masking, reduced-motion fallback.

Live Demo ↗

Preview

We are a studio specialized in brand strategy, identity and culture. We help organizations align what they are, what they do and what the rest perceive of them.

Study

Source

"use client";

import BeNorthTagline from "./index.jsx";
import { benorthTagline } from "../demo-data.js";
import styles from "./demo.module.css";

export default function BeNorthTaglineDemo() {
  return (
    <div className={styles.demo}>
      <header className={styles.intro}>
        <p>Scroll — words cascade in when the section enters.</p>
      </header>
      <BeNorthTagline {...benorthTagline} />
      <div className={styles.outro} />
    </div>
  );
}

Related Components

1W AGO

Milk Scenarios & Expertiseabout-story

3MO AGO

Editorial Introabout-story

3MO AGO

About Introabout-story