R.1
Reconstructing an existing brand
Milk Scenarios & Expertise
Full 'Scenarios + Expertise' stack from the milk network about page — five sub-sections in one. The signature R.1/N.2/B.3 row is pure CSS: a grid at 50%/25%/25% whose template swaps via :has(:nth-child(n):hover) so the hovered card eases to half width (0.6s cubic-bezier(.3,.86,.36,.95)) while its description slides up, its thumb fades in on a 0.15s delay and its ⊕ icon scales away — card 1 holds the expanded state at rest. Also: a scrubbed GSAP parallax band (1.3× image drifting ±10%), SplitText line-mask entrances (per-char for the card codes), fade+40px rises on thumbs, and expertise rows where container hover dims siblings to 0.3, inverts the hovered pill to black and zooms its image 1.1×.
Preview
Scenarios
Every opportunity comes with its unique factors. However, those are the main collaboration streams/ scenarios we can offer your brand.
N.2
Building a new brand
B.3
Expand brands
Every brand has its own unique story, just like human beings. Our aim is to nurture brands and help them grow. And just like humans… brands need milk to grow.
Strategy
Architecture001
Culture002
Positioning003
Personality004
Experience005
Identity
Eco System (Visual Identity)006
Brand Touchpoints007
Guidelines008
Way-finding & environmental009
Sonic branding010
Communication
Concepts011
Art Directions012
Digital and Social Media013
Photography and Videography014
Content Creation015
Source
"use client";
import MilkScenariosExpertise from "./index.jsx";
import { milkScenariosExpertise } from "../demo-data.js";
import styles from "./demo.module.css";
export default function MilkScenariosExpertiseDemo() {
return (
<div className={styles.demo}>
<header className={styles.intro}>
<p>Scroll — hover the R.1 / N.2 / B.3 cards and the expertise rows.</p>
</header>
<MilkScenariosExpertise {...milkScenariosExpertise} />
<div className={styles.outro} />
</div>
);
}
Dependencies
gsap@gsap/react
Related Components
1W AGO
BeNorth Taglineabout-story
3MO AGO
Editorial Introabout-story
3MO AGO
About Introabout-story