alain.bagmi/skills

Fork 0

Mylestech Admin 9c1bf0a285 Central skills catalog: 472 skills + WORKING_SET + AGENTS

2026-07-13 14:05:05 -04:00

12 KiB

Raw Blame History

Case Studies: Agency Technique Analysis

Locomotive (Montreal)
Studio Freight (New York)
AREA 17 (Paris/NYC)
Hello Monday (Copenhagen/NYC)
Dogstudio (Belgium/Chicago)
Tonik (Poland)
Instrument (Portland)
Active Theory (LA)
Common Patterns Across Elite Agencies

1. Locomotive (Montreal)

Signature: Smooth, refined, editorial precision

Technical Fingerprint

STACK
├── Custom scroll (Locomotive Scroll - they created it)
├── GSAP for animations
├── Custom vanilla JS
├── No heavy frameworks
└── Hand-crafted CSS

SIGNATURE TECHNIQUES
├── Extreme smooth scrolling with lerp
├── Parallax on almost everything (but subtle)
├── Split text animations on every headline
├── Magnetic cursor effects
├── Scale-up reveals on scroll

Design Patterns

/* Locomotive-style color palette */
:root {
  --loco-cream: #f5f2eb;
  --loco-black: #1a1a1a;
  --loco-accent: #ff5c00;
}

/* Their characteristic wide spacing */
.loco-section {
  padding: 20vh 0;
}

/* Massive display type */
.loco-hero-title {
  font-size: clamp(4rem, 15vw, 18rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.85;
}

Animation Style

// Locomotive-style page reveal
gsap.timeline()
  .from(".hero-title .word", {
    y: "110%",
    duration: 1.4,
    ease: "expo.out",
    stagger: 0.08
  })
  .from(".hero-meta", {
    opacity: 0,
    y: 30,
    duration: 0.8,
    ease: "expo.out"
  }, "-=0.8");

2. Studio Freight (New York)

Signature: Bold, typographic, tech-forward

Technical Fingerprint

STACK
├── Lenis (they created it)
├── React/Next.js
├── GSAP with custom easings
├── Three.js for 3D elements
├── Heavy WebGL use

SIGNATURE TECHNIQUES
├── Massive typography as hero
├── Shader-based transitions
├── Horizontal scroll sections
├── Custom cursor interactions
├── Grid-breaking layouts

Design Patterns

/* Studio Freight aesthetic */
:root {
  --sf-black: #0e0e0e;
  --sf-white: #f8f8f8;
  --sf-rust: #c4553d;
}

/* Their bold type treatment */
.sf-headline {
  font-family: 'Monument Extended', sans-serif;
  font-size: clamp(3rem, 12vw, 14rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

/* Characteristic list styling */
.sf-list {
  font-family: 'Neue Montreal', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.sf-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sf-list li::before {
  content: '→';
  margin-right: 0.5rem;
}

Their Project Card Style

.sf-project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 2rem;
  background: var(--sf-black);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sf-project-card:hover {
  transform: scale(0.98);
}

.sf-project-card img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sf-project-card:hover img {
  transform: scale(1.05);
}

3. AREA 17 (Paris/NYC)

Signature: Sophisticated, institutional, systematic

Technical Fingerprint

STACK
├── Twill (their CMS)
├── Vue.js preference
├── GSAP for animations
├── Custom design systems
└── Enterprise-grade infrastructure

SIGNATURE TECHNIQUES
├── Restrained animations
├── Perfect typography
├── Systematic color application
├── Accessibility-first
├── Content-driven layouts

Design Patterns

/* AREA 17 systematic approach */
:root {
  /* They use client's brand colors systematically */
  --brand-primary: currentColor;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --surface: #ffffff;
  --border: #e5e5e5;
}

/* Their grid is always precise */
.a17-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4rem;
}

/* Typography hierarchy */
.a17-h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.a17-body {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 65ch;
}

Animation Philosophy

// AREA 17 - restrained, purposeful
// They rarely use flashy effects

// Simple fade up on scroll
gsap.utils.toArray('[data-reveal]').forEach(el => {
  gsap.from(el, {
    y: 40,
    opacity: 0,
    duration: 0.8,
    ease: "power2.out",
    scrollTrigger: {
      trigger: el,
      start: "top 85%"
    }
  });
});

// No stagger, no split text, just clean reveals

4. Hello Monday (Copenhagen/NYC)

Signature: Playful, inventive, technically ambitious

Technical Fingerprint

STACK
├── React/Next.js
├── Three.js / WebGL heavy
├── GSAP + custom physics
├── Pixel-perfect craft
└── Experimental approaches

SIGNATURE TECHNIQUES
├── Custom physics simulations
├── Interactive 3D scenes
├── Particle systems
├── Sound design integration
├── Gamification elements

Design Philosophy

/* Hello Monday embraces bold experiments */
.hm-experimental {
  /* They're not afraid of: */
  mix-blend-mode: difference;
  cursor: none; /* Custom cursor always */
  
  /* Complex gradients */
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(255,100,100,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(100,100,255,0.3) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a, #1a1a2e);
}

/* Their type tends toward expressive */
.hm-display {
  font-family: 'Custom Variable Font', sans-serif;
  font-variation-settings: 'wght' 800, 'wdth' 125;
  font-size: clamp(4rem, 20vw, 20rem);
}

Interactive Pattern

// Hello Monday-style interactive element
class InteractiveScene {
  constructor() {
    this.mouse = { x: 0, y: 0 };
    this.targetMouse = { x: 0, y: 0 };
    this.lerp = 0.1;
    
    window.addEventListener('mousemove', this.onMouseMove.bind(this));
    this.animate();
  }
  
  onMouseMove(e) {
    this.targetMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    this.targetMouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  }
  
  animate() {
    // Smooth interpolation
    this.mouse.x += (this.targetMouse.x - this.mouse.x) * this.lerp;
    this.mouse.y += (this.targetMouse.y - this.mouse.y) * this.lerp;
    
    // Apply to 3D scene, particles, etc.
    requestAnimationFrame(this.animate.bind(this));
  }
}

5. Dogstudio (Belgium/Chicago)

Signature: Emotional, immersive, story-driven

Technical Fingerprint

STACK
├── Custom solutions
├── WebGL for immersive experiences
├── GSAP animation
├── Video integration
└── Performance-optimized

SIGNATURE TECHNIQUES
├── Cinematic page transitions
├── Full-screen video backgrounds
├── Scroll-based storytelling
├── Sound + visual harmony
├── Cultural institution specialization

Design Patterns

/* Dogstudio immersive approach */
.ds-immersive-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.ds-video-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ds-content-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 4rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    transparent 50%
  );
}

/* Their navigation is often minimal */
.ds-nav {
  position: fixed;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  display: flex;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: white;
  z-index: 100;
}

6. Tonik (Poland)

Signature: Startup-focused, fast, modern

Technical Fingerprint

STACK
├── Webflow / Framer (no-code speed)
├── React for complex apps
├── Figma-first workflow
├── Rapid iteration
└── SaaS specialization

SIGNATURE TECHNIQUES
├── Bold gradient usage
├── 3D elements via Spline
├── Micro-animations everywhere
├── Dark mode preference
├── Tech startup aesthetic

Design Patterns

/* Tonik startup aesthetic */
:root {
  --tonik-bg: #0a0a0a;
  --tonik-surface: #141414;
  --tonik-border: rgba(255,255,255,0.1);
  --tonik-accent: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.tonik-card {
  background: var(--tonik-surface);
  border: 1px solid var(--tonik-border);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.tonik-card:hover {
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-4px);
}

.tonik-gradient-text {
  background: var(--tonik-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Their button style */
.tonik-btn {
  background: var(--tonik-accent);
  color: white;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tonik-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3);
}

7. Instrument (Portland)

Signature: Brand-centric, polished, scalable

Technical Fingerprint

STACK
├── Enterprise frameworks
├── Design system focus
├── Accessibility-first
├── Performance optimized
└── Long-term maintenance

SIGNATURE TECHNIQUES
├── Brand system extension
├── Motion design language
├── Component-based design
├── Systematic spacing
├── Client brand preservation

Design Philosophy

/* Instrument systematic approach */
:root {
  /* They create extensive token systems */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  
  /* Typography scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
}

/* Everything built from tokens */
.instrument-component {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  font-size: var(--font-size-md);
}

8. Active Theory (LA)

Signature: Technical excellence, immersive WebGL

Technical Fingerprint

STACK
├── Custom WebGL frameworks
├── Three.js mastery
├── Shader programming
├── VR/AR capabilities
└── Maximum technical ambition

SIGNATURE TECHNIQUES
├── Full 3D environments
├── Custom shader effects
├── Real-time rendering
├── Interactive experiences
├── Sound reactive visuals

9. Common Patterns Across Elite Agencies

Universal Techniques

TYPOGRAPHY
├── Custom/premium fonts (never system fonts)
├── Extreme scale contrast (10:1+ ratios)
├── Negative tracking on display type
├── Line-height varies by use case
└── Text animations on key headlines

ANIMATION
├── Custom easing (never linear, rarely ease)
├── Staggered reveals
├── Scroll-triggered sequences
├── Smooth scrolling (Lenis/Locomotive)
└── Page transitions

LAYOUT
├── 12-column base grid
├── Strategic grid breaking
├── Generous white space
├── Full-bleed imagery
└── Asymmetric compositions

COLOR
├── Limited palettes (2-3 colors max)
├── Bold accent usage
├── Dark mode capability
├── Contextual color shifts
└── Never pure black/white

INTERACTION
├── Custom cursors
├── Magnetic buttons
├── Hover state reveals
├── Micro-feedback
└── Sound design (optional)

PERFORMANCE
├── Optimized assets
├── Lazy loading
├── Code splitting
├── GPU acceleration
└── Core Web Vitals passing

What They ALL Avoid

NEVER SEEN ON ELITE SITES
✗ Stock photography (unedited)
✗ Generic icons (Font Awesome default)
✗ System fonts
✗ Bootstrap/default components
✗ Lazy lorem ipsum
✗ Auto-generated layouts
✗ Cookie-cutter templates
✗ Generic loading spinners
✗ Aggressive pop-ups
✗ Cluttered footers

12 KiB Raw Blame History

Case Studies: Agency Technique Analysis

Table of Contents

1. Locomotive (Montreal)

Technical Fingerprint

Design Patterns

Animation Style

2. Studio Freight (New York)

Technical Fingerprint

Design Patterns

Their Project Card Style

3. AREA 17 (Paris/NYC)

Technical Fingerprint

Design Patterns

Animation Philosophy

4. Hello Monday (Copenhagen/NYC)

Technical Fingerprint

Design Philosophy

Interactive Pattern

5. Dogstudio (Belgium/Chicago)

Technical Fingerprint

Design Patterns

6. Tonik (Poland)

Technical Fingerprint

Design Patterns

7. Instrument (Portland)

Technical Fingerprint

Design Philosophy

8. Active Theory (LA)

Technical Fingerprint

9. Common Patterns Across Elite Agencies

Universal Techniques

What They ALL Avoid

12 KiB

Raw Blame History