Three Teams. One Identity.
Three competing design approaches for frankx.ai's signature visual identity. Each team brings a complete homepage redesign with hero, card system, typography, color strategy, and motion philosophy.
Review each approach below. The winner gets implemented site-wide.
Approach 1 of 3
Team Alpha: Cosmic Forge
Atmospheric Drama — One breathtaking WebGL hero effect per page. Stripe-level drama on entry, Linear-level calm below the fold.
AI Architect & Creator
Buildingintelligencethatcompounds.
Enterprise AI systems. 12,000+ songs. 75+ open-source skills. Everything documented.
Card System
AI Architecture
Enterprise AI systems and workflows.
Creative Systems
12,000+ songs, generative art.
Open Tools
75+ skills, 38 agents shipped.
GlowCard (existing) with cursor-following radial glow. BentoGrid layout. No card modifications needed.
Typography
Eyebrow Label
Three domains. One practice.
Body text at 50% opacity. Inter for readability.
Color Palette
#0a0a0b
Base
#AB47C7
Hero only
#43BFE3
Hero only
#10b981
CTAs
Motion Philosophy
""One spectacle, then silence."
Full-viewport WebGL mesh gradient with 4 brand colors drifting organically. Blur overlay at 0.4 opacity with screen blend.
Strengths
Immediate visual impact — visitors remember the hero
Restraint below fold keeps content readable
Only 1 new component to build
Three.js already installed
Risks
Risk of Stripe clone perception
WebGL canvas is a perf concern on low-end devices
The "one big thing" bet — if the hero doesn't land, there's no fallback visual identity
1
New Components
~3KB
Bundle Impact
10+
Reused Components
Enterprise architects who expect polish
Best For
Approach 2 of 3
Team Beta: Glass Cathedral
Systematic Elegance — Hierarchical glassmorphism. Every element communicates importance through its glass tier. Near-monochrome. The site feels like walking through rooms of increasing clarity.
frankx.ai
Intelligence that compounds.
AI architecture, creative systems, and open tools.
Built at Oracle. Documented here.
4+ years
Enterprise AI
Oracle AI Architect
12,000+
AI Songs Created
Suno & beyond
75+
Open Source Skills
Claude Code ecosystem
Card System
AI Architecture
frosted
Creative Systems
crystal
Open Tools
liquid
GlassCard with 4-tier hierarchy: frosted (standard), crystal (featured), liquid (premium CTAs), obsidian (overlays).
Typography
Eyebrow Label
Intelligence that compounds.
Body text at 35% opacity. Dimmer. Glass provides visual interest.
Color Palette
#0a0a0b
Everywhere
#ffffff10
Glass cards
#ffffff1f
Crystal cards
#10b981
Primary CTA only
Motion Philosophy
""Glass does not jump."
90vh static void background with 3 overlapping radial gradients at 2-4% opacity. Crystal stat cards. Everything fades in together.
Strengths
Near-zero bundle impact — all existing components
Linear/Vercel-adjacent credibility
Glass hierarchy creates natural visual architecture
Easiest to maintain and extend
Risks
Risk of feeling cold or corporate
Backdrop-filter stacking can cause perf issues (max 8 visible)
May feel too restrained for creative technologist audience
2
New Components
~0KB
Bundle Impact
7+
Reused Components
Developer tools audience (Linear, Vercel, Raycast users)
Best For
Approach 3 of 3
Team Gamma: Neon Grid
Electric Precision — Per-section color rotation through the brand palette. Canvas dot grid with cursor-repulsion physics. Bold, maker-culture energy.
Buildingintelligence
thatcompounds.
Enterprise AI at Oracle. 12,000+ songs. 75+ open-source skills. Everything documented, everything shipped.
Card System
AI Architecture
Section-specific color accent.
Creative Systems
Section-specific color accent.
Open Tools
Section-specific color accent.
NeonCard wraps ShimmerCard with expanding gradient accent line. Shimmer color matches section accent.
Typography
Eyebrow in accent color
Three domains. One practice.
Body text at 55% opacity. Slightly brighter.
Color Palette
#10b981
AI section
#f59e0b
Creative section
#8b5cf6
Tools section
#06b6d4
Newsletter
Motion Philosophy
""Everything earns its entrance."
Full-viewport with canvas dot grid (40px spacing). Left-aligned 60/40 split. Floating product mockup with glow halo.
Strengths
Strongest personality and visual identity
Dot grid cursor interaction is memorable and unique
Per-section color creates visual rhythm across long pages
Best for creative/maker audience
Risks
Highest risk of visual noise
Most new components (3) to build and maintain
Color rotation needs careful calibration to avoid chaos
3
New Components
~2KB
Bundle Impact
9+
Reused Components
Creative technologists and maker culture
Best For
Side-by-Side Comparison
Every dimension, every trade-off.
| Dimension | Alpha | Beta | Gamma |
|---|---|---|---|
| Hero | WebGL mesh gradient | Static void + crystal stats | Canvas dot grid + floating mockup |
| Core Card | GlowCard (existing) | GlassCard (existing) | ShimmerCard + NeonCard wrapper |
| Color Strategy | Monochrome below hero | Near-monochrome + element tint | Per-section color rotation |
| Motion | Dramatic hero, quiet body | Near-zero throughout | Moderate everywhere |
| Typography | Gradient on hero only | Monospace accents, no gradients | Gradient per section heading |
| Background | Void/space alternation | Uniform void | Per-section radial gradients |
| New Components | 1 | 2 | 3 |
| Bundle Impact | ~3KB | ~0KB | ~2KB |
| Emphasizes | Excellence, depth | Craftsmanship, restraint | Personality, energy |
| Biggest Risk | Stripe clone | Cold/corporate | Visual noise |