> ## Documentation Index
> Fetch the complete documentation index at: https://withseismic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Helix.ai: LLM Research Landing Page

> A scientifically credible, distinctly modern landing page for an AI protein folding research platform.

<script type="application/ld+json">
  {`{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Helix.ai - LLM Research Landing Page",
    "description": "Landing page design for an AI protein folding research platform.",
    "url": "https://withseismic.com/case-studies/helix-ai-landing-page",
    "author": {
      "@type": "Organization",
      "name": "WithSeismic"
    },
    "publisher": {
      "@type": "Organization",
      "name": "WithSeismic",
      "logo": {
        "@type": "ImageObject",
        "url": "https://withseismic.com/logo/light.svg"
      }
    }
    }`}
</script>

<video autoPlay muted loop playsInline className="w-full rounded-xl mb-8" src="https://media.contra.com/video/upload/fl_progressive/q_auto:best,w_2000/afbn94l16gnoy27ayil2.mp4" />

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 not-prose">
  <Card title="Scientific Credibility" icon="flask">
    Design language that researchers trust
  </Card>

  <Card title="Modern Aesthetic" icon="sparkles">
    Distinctly contemporary visual approach
  </Card>

  <Card title="WebGL Visuals" icon="cube">
    3D protein structure visualizations
  </Card>
</div>

## The Brief

Communicate cutting-edge science without alienating non-technical visitors.

Helix, an AI-powered protein folding research platform, needed a landing page that would resonate with two very different audiences:

1. **Researchers**: Scientists who need to trust the platform's credibility
2. **Investors**: Business stakeholders who need to understand the opportunity

The visual language needed to feel scientifically credible and distinctly modern.

## Design Approach

### Visual Language

We developed a design system that bridges science and technology:

* **Color Palette**: Deep blues and purples evoking molecular visualization software
* **Typography**: Clean, technical typefaces that feel at home in academic papers
* **Imagery**: Abstract 3D representations of protein structures
* **Motion**: Subtle animations that suggest molecular movement

### Content Strategy

The page guides visitors through:

1. **The Problem**: Why protein folding matters for drug discovery
2. **The Solution**: How AI accelerates the research process
3. **The Technology**: Technical credibility without overwhelming jargon
4. **The Team**: Scientific credentials that build trust

## Technical Stack

<CardGroup cols={3}>
  <Card title="React" icon="react">
    Component architecture
  </Card>

  <Card title="TypeScript" icon="code">
    Type-safe development
  </Card>

  <Card title="WebGL" icon="cube">
    3D visualizations
  </Card>

  <Card title="Three.js" icon="shapes">
    3D rendering library
  </Card>

  <Card title="Next.js" icon="n">
    React framework
  </Card>

  <Card title="Tailwind" icon="paintbrush">
    Styling system
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={2}>
  <Card title="Interactive Molecules" icon="atom">
    WebGL-powered protein structure viewer
  </Card>

  <Card title="Research Pipeline" icon="diagram-project">
    Visual explanation of the AI workflow
  </Card>

  <Card title="Publication Feed" icon="newspaper">
    Latest research papers and findings
  </Card>

  <Card title="Team Profiles" icon="users">
    Scientific credentials showcase
  </Card>
</CardGroup>

## Client

Developed for **Helix** as their primary marketing presence.

<Card title="View on Contra" icon="arrow-up-right-from-square" href="https://contra.com/p/mq6WUXZq-helixai-llm-research-landing-page">
  See the full project showcase
</Card>