Custom

Monogram Patterns

Subtle background patterns created using the brand's triangular monogram logo, animated with Framer Motion.

Preview

Live component example.

Interactive Pattern Styles

Subtle vector background patterns created with the monogram. Hover to preview the animations.

Tone:

Precision Grid

Aligns small monograms in a standard grid layout. Staggers scale and rotation on hover.

Hover to Preview

variant="grid"

Offset Hex

Honeycomb-like alignment where alternate rows offset and rotate in opposite directions.

Hover to Preview

variant="offset"

Dots & Monograms

Combines minimal dots with monograms. Hovering fades the dots and enlarges the monograms.

Hover to Preview

variant="dots"

Diagonal Flow

Arranges monograms on a 45-degree angle. Hovering triggers a wave running down-right.

Hover to Preview

variant="diagonal"

Concentric Aperture

Circular orbits of monograms rotating at different speeds on hover.

Hover to Preview

variant="concentric"

Tech Circuit

A schematic tech layout connecting monogram nodes. Traces paths on hover.

Hover to Preview

variant="circuit"

Sine Wave Flow

Coordinates monograms on alternating sine wave heights. Propagates undulating hover scales.

Hover to Preview

variant="waves"

Floating Particles

Randomly distributes monograms like floating stardust. Hovering creates floating orbit drifts.

Hover to Preview

variant="scatter"

Full-Width Section Backdrop Preview

Visualize how patterns appear as full section background elements under headings and text, masked with custom gradient fades.

Pattern:

Tone:

Gradient Mask:

Large Viewport Mode

Backdrop Simulation

Premium Design Meets Dynamic Engineering

Hover anywhere on this section block to watch the custom pattern animate in the background. The gradient mask controls soft edges to maintain readability.

Usage & Props

How to configure and embed the pattern backgrounds in cards or section wrappers.

Section Background with Gradient Mask

import { MonogramPattern } from "@/components/brand/monogram-patterns"

export function FeatureSection() {
  return (
    <section className="relative overflow-hidden bg-black py-24 text-center">
      {/* Absolute pattern with Tailwind mask utility */}
      <MonogramPattern 
        variant="scatter" 
        tone="primary" 
        className="opacity-20 [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_90%)]"
      />
      
      <div className="relative z-10 max-w-4xl mx-auto">
        <h2>Interactive Backdrop Section</h2>
        <p>Patterns automatically scale and animate on hover.</p>
      </div>
    </section>
  )
}

Parent-Triggered Hover Sync (Propagating to Children)

import * as React from "react"
import { MonogramPattern } from "@/components/brand/monogram-patterns"

export function InteractiveProjectCard() {
  const [isHovered, setIsHovered] = React.useState(false)

  return (
    <div 
      className="relative overflow-hidden rounded-xl border p-6"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <MonogramPattern 
        variant="waves" 
        tone="primary" 
        isParentHovered={isHovered} 
      />
      
      <div className="relative z-10">
        <h3>Hover Synchronized Card</h3>
      </div>
    </div>
  )
}