Animated Logo
The spinning 3D circle ring logo used throughout the site. This is the centralized component for all logo animations.
Interactive Playground
Adjust the controls below to preview the animated logo in real-time. Changes here are for preview only—edit the component file to make permanent changes.
Watch the 3D ring rotate continuously
<CircleRingLogo size={120} variant="default" />Usage Across the Site
The CircleRingLogo component is used in the following locations:
Navigation & Layout
- • Header (top navigation)
- • Sidebar
Pages
- • Home page
- • Story, Research, Mission, About
- • Contact, Privacy pages
Components
- • Hero Typewriter Section (CMS)
Component File
app/(design-system)/design-system/logo/CircleRingLogo.tsxCircle Ring
The circle ring logo is the base logo variant, featuring a simple stroke outline of a circle ring.
Large (64px)
Medium (48px)
Small (32px)
Usage
import { CircleRingLogo } from "@/app/(design-system)/design-system/logo/CircleRingLogo";
export function MyComponent() {
return (
<CircleRingLogo size={48} />
);
}Color
The logo supports multiple color variants for different use cases. Choose the variant that best fits your context.
Default
Theme-aware: vibrant primary in dark mode, dark brown in light mode
Primary
Solid primary color - warm golden/amber
Secondary
Solid secondary color - warm tan/brown
Contrast
High contrast - very light in dark mode, very dark in light mode
Gradient
Primary to secondary gradient - outer ring primary, inner ring secondary
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 48 | Size of the logo in pixels |
className | string | undefined | Additional CSS classes |
variant | "default" | "primary" | "secondary" | "contrast" | "gradient" | "default" | Color variant of the logo |