Aetheris

A premium, animation-driven landing page for a fictional biotechnology company. Built as a creative frontend assignment: programmable cell therapies, not a generic DNA-helix template.

Aetheris designs living medicines — immune cells with synthetic gene circuits that sense a tumor or autoimmune flare and respond only then.

Tech stack

• Next.js 16 (App Router) + TypeScript
• Tailwind CSS v4
• Framer Motion
• Lenis (smooth scroll)
• Custom Canvas 2D signal field

Setup

npm install
npm run dev

Open http://localhost:3000.

npm run build
npm run start

Design approach

Brand. Ink forest (#0B1210), bone paper (#F4F1EA), GFP-like chlorophyll (#7CFFB2), and copper (#C4A574). The green is used like a lab fluorophore: sparse, precise, never a full-page neon wash. Copper hairlines and a faint scientific grid keep it closer to instrumentation than to a SaaS gradient.

Type. Cormorant Garamond for headlines (open, editorial, not cramped) and Manrope for UI. IBM Plex Mono for scientific labels. The wordmark is tracked-out AETHERIS with a stacked BIO line — a signal-wave mark, not a squeezed icon.

Motif. Cellular signaling as a flow field — filaments, scan lines, and expanding pulses — instead of bubble/vesicle particles or a spinning DNA helix.

Copy. Written like a real Series A/B biotech: Sense / Circuit / Act, gated payloads, off-target silence. No lorem ipsum.

Animation approach

Motion is meant to feel biological — drift, dock, fire, resolve — not decorative bounce.

• Lenis smooths wheel scroll (lerp 0.07) and offsets hash-link landing so the nav does not cover headings. prefers-reduced-motion turns smoothing off.
• Framer Motion handles load stagger, whileInView section reveals, the technology step sequence, and hover states.
• Micro-interactions: magnetic/glowing buttons, card tilt on hover, drawing nav underlines, a chlorophyll scroll-progress bar, logo scale, and footer link color shifts.
• Hero canvas (SignalField) fills the full hero background: noise-driven filaments, a microscopy-style scan, and expanding signal pulses. Copy sits over a left-side scrim so type stays readable. The cursor warps the field. The loop pauses off-screen. Touch devices drop pointer interaction so scrolling stays clean.
• Technology is a pinned-feeling desktop sequence: left copy advances, the SVG cell arms receptors, lights the circuit, releases vesicles, then damps. Mobile becomes a vertical timeline.
• Impact counters ease in when the section enters view.

Reduced-motion users get a static field drawing, instant scroll, and no count-up interpolation.

Project structure

src/
  app/                 layout, page, tokens
  components/
    layout/            Navbar, Footer
    sections/          Hero → Final CTA
    visuals/           SignalField, CircuitCell
    ui/                Button, SectionHeading, StatCounter, Logo
    providers/         Lenis wrapper
  lib/                 copy + motion variants
  hooks/               reduced-motion, active section

Accessibility

Skip link, semantic landmarks, heading order, keyboard-usable nav and form, :focus-visible rings, aria-current on the active section, and labeled form fields. Contrast is bone-on-ink with copper/chlorophyll used as accents, not body text.

npx vercel

Live Demo: https://aetheris-bio.vercel.app/

License

MIT. Aetheris is a fictional brand.