Brand Fit Pro

Drop your logo and every component turns into your brand's metal and glass. It runs entirely in your browser — the logo is never uploaded.

Drop your logo here
PNG, JPG, SVG or WebP · stays on your device
Brand colours

Your brand, live

Acme
Chrome Text
Mercury Orb
Liquid Metal Button
Acme Pro
$24/mo
Move your cursor over it.
Liquid Glass Card
Prompt Input
Voice Orb

Your presets

// brand.ts — custom presets need the Pro build of each component
export const brandMetal = {
  "colorLow": [0.11, 0.05, 0.2],
  "colorHigh": [0.72, 0.58, 0.96],
  "tint": [0.99, 0.94, 1.07],
  "iridescence": 0.55,
  "metalness": 0.8,
  "contrast": 0.72
};

export const brandGlass = {
  "fill": "rgba(124,58,237,0.14)",
  "blur": 24,
  "saturate": 1.5,
  "rim": [0.96, 0.64, 0.8],
  "spectral": 0.35,
  "light": 1.1
};

// <ChromeText preset={brandMetal}>Acme</ChromeText>
// <MercuryOrb preset={brandMetal} state="thinking" />
// <LiquidMetalButton preset={brandMetal}>Get started</LiquidMetalButton>
// <LiquidGlassCard preset={brandGlass}>…</LiquidGlassCard>
// <PromptInput preset={brandMetal} generating={isGenerating} />
// <VoiceOrb preset={brandMetal} />

Previewing is free. Custom presets are read by the Pro build of each component — the free files fall back to their default preset.