GeekBrain.io VC Fund Webpage - Design Specification

Date: 2026-03-21 Status: Draft - Pending Approval

Overview

A single-page website for GeekBrain.io, a VC fund. The site establishes brand presence with a futuristic/tech aesthetic, showcasing the fund's identity with particle effects, glitch text animations, and glowing UI elements. This is a minimal launch site (no portfolio yet) designed for easy expansion later.

Goals

Establish GeekBrain.io's brand presence online
Create a visually striking first impression with futuristic effects
Provide basic information about the fund
Enable contact via LinkedIn
Built for future expansion when portfolio companies are added

Tech Stack

Technology	Purpose
Next.js 14	App Router framework
Tailwind CSS	Styling with custom utilities
@tsparticles/react	Particle background system
Custom CSS	Glitch text keyframes
Vercel/Netlify	Deployment (zero-config)

Project Structure

geekbrain-site/
├── app/
│   ├── layout.tsx              # Root layout with dark theme
│   ├── page.tsx                # Single page home
│   └── globals.css              # Tailwind + custom effects
├── components/
│   ├── Hero.tsx                # Animated hero with glitch text
│   ├── About.tsx               # About section with glassmorphism card
│   ├── Contact.tsx             # LinkedIn social link
│   ├── ParticleBackground.tsx  # Full-screen particle canvas
│   ├── GlitchText.tsx          # Reusable glitch text component
│   └── GlowLink.tsx            # Reusable glowing link component
├── tailwind.config.ts          # Custom glow utilities
├── tsconfig.json
├── package.json
└── README.md

Visual Design

Color Palette

Name	Hex	Usage
Background	`#050510`	Deep navy, almost black with blue tint
Primary Accent	`#0088ff`	Electric blue - main glows, highlights
Secondary Accent	`#00ddff`	Cyan - bright accents, hover states
Tertiary Accent	`#6600ff`	Deep purple - subtle contrast
Heading Text	`#ffffff`	White
Body Text	`#8899bb`	Soft blue-gray
Card Background	`rgba(0, 40, 80, 0.3)`	Dark blue glassmorphism

Typography

Element	Font	Weight
Headings	Space Grotesk	600-700
Body	Inter	400
Code/Mono	JetBrains Mono	400 (optional)

Visual Effects

Particle Background:

80-120 particles, 2-3px radius, blue/cyan color palette
Lines connect particles within 150px proximity, 0.3 opacity
Slow drift movement (speed 0.5), no gravity
Mouse interaction: gentle repel on hover, attract on click
Performance: requestAnimationFrame, pauses when tab hidden

Glitch Text:

3-layer approach: base text + 2 pseudo-elements (::before, ::after)
Keyframes: clip-path changes, translate offsets, color shifts
Base: white, offset layers: cyan (#00ddff) and deep blue (#0066cc)
2.5s animation loop: 70% stable, 30% glitching
Intensity controlled via CSS custom properties

Glow Effects:

Custom Tailwind utilities: .glow-blue, .glow-cyan, .text-glow-blue
animate-pulse-glow for subtle pulsing animations
300ms ease-out transitions for hover states

Scroll Animations:

IntersectionObserver for scroll-reveal
Fade in + slight translate up when entering viewport
Staggered timing for list items

Components

ParticleBackground

Full-screen canvas component positioned behind all content. Uses @tsparticles with custom configuration for blue-themed neural network effect.

Props: None (configured internally)

Behavior:

Renders as fixed, full-viewport canvas with z-index: -1
Particles drift slowly, connecting when near each other
Responds to mouse position for subtle interactivity

Hero

Main landing section with animated headline.

Content:

GlitchText component: "GEEKBRAIN.IO"
Tagline: "Backing the builders of tomorrow"
Subtle scroll indicator (optional)

Layout:

Full viewport height (100vh)
Centered content, transparent background
Particles visible behind

GlitchText

Reusable component for glitch effect on text.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | required | Text to display | | as | 'h1' | 'h2' | 'h3' | 'h1' | Heading level | | intensity | 'subtle' | 'normal' | 'aggressive' | 'normal' | Glitch intensity |

About

Information section about the fund.

Content (placeholder):

Heading: "About"
Body: Brief description of GeekBrain.io's mission and approach

Layout:

Glassmorphism card with blue glow border
Padding: responsive (p-6 md:p-8)
Fade-in animation on scroll

Draft Copy:

GeekBrain.io is a venture capital fund focused on backing technical founders building transformative technologies. We believe the best companies start with builders who understand the problem they're solving. Our mission is to provide the capital, network, and strategic support these founders need to turn bold ideas into reality.

Contact

Social links section.

Content:

Heading: "Connect"
Single link: LinkedIn (opens in new tab)

Layout:

LinkedIn icon with glow effect on hover
Centered, horizontal layout
Optional brief text above icons

GlowLink

Reusable glowing link component.

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | href | string | required | Link destination | | icon | ReactNode | required | Icon element | | label | string | optional | Accessible label |

Behavior:

Dark background, blue border by default
Blue glow expands on hover
Cyan glow intensifies on active/pressed

Page Layout

┌─────────────────────────────────────────────┐
│  [ParticleBackground - full viewport]       │
│  ┌─────────────────────────────────────┐   │
│  │           HERO (100vh)               │   │
│  │                                      │   │
│  │      GEEKBRAIN.IO (glitch)           │   │
│  │   "Backing the builders of           │   │
│  │         tomorrow"                     │   │
│  │                                      │   │
│  │         ↓ scroll indicator           │   │
│  └─────────────────────────────────────┘   │
│  ┌─────────────────────────────────────┐   │
│  │           ABOUT                      │   │
│  │  ┌─────────────────────────────────┐ │   │
│  │  │  Glass card with blue glow      │ │   │
│  │  │  About GeekBrain.io text...     │ │   │
│  │  └─────────────────────────────────┘ │   │
│  └─────────────────────────────────────┘   │
│  ┌─────────────────────────────────────┐   │
│  │          CONNECT                      │   │
│  │        [LinkedIn icon]                │   │
│  │      (glows on hover)                  │   │
│  └─────────────────────────────────────┘   │
└─────────────────────────────────────────────┘

Performance Considerations

Particle system uses requestAnimationFrame and pauses when tab is hidden
Animations use CSS transforms and opacity (GPU-accelerated)
Images (if any) use Next.js Image component for optimization
Fonts loaded via next/font for optimal loading
Minimal JavaScript bundle: only essential components

Accessibility

Semantic HTML structure (headings hierarchy)
Glitch animation respects prefers-reduced-motion
Social links have aria-labels
Sufficient color contrast for body text
Focus visible states on interactive elements

Future Expansion

The site is designed to easily add:

Portfolio companies section
Incubation section
Team section
Contact form (would require backend)
Additional social platforms

Files to Create

app/layout.tsx - Root layout with fonts and dark theme
app/page.tsx - Main page composing all sections
app/globals.css - Tailwind imports + custom keyframes
components/Hero.tsx - Hero section
components/About.tsx - About section
components/Contact.tsx - Contact section
components/ParticleBackground.tsx - Particle system
components/GlitchText.tsx - Glitch text component
components/GlowLink.tsx - Glowing link component
tailwind.config.ts - Custom utilities
package.json - Dependencies
tsconfig.json - TypeScript config