Elias Vent

Elias Vent is a dark, motion-led portfolio theme for product and motion designers, available as both an Astro theme and a Next.js build, with static output and no framework runtime.

What is Elias Vent?

Elias Vent is a portfolio theme for product and motion designers that ships in two versions: an Astro theme (the primary source, in the repository root) and the same site rebuilt for Next.js 16 in the next/ folder using the App Router, React 19, and static export. Both produce plain static files, and every interaction is implemented as a small vanilla TypeScript module rather than a framework runtime. It is published by Startfrom under the MIT license.

Key Features

• WebGL cylinder carousel — project covers curve around a cylinder in the hero, with a liquid and chromatic shader reacting to scroll speed; falls back to plain images when WebGL is unavailable.
• Lenis smooth scrolling — scroll behaviour is handled by Lenis, and the whole effect layer is disabled under prefers-reduced-motion.
• Scroll-driven motion — scroll-scrubbed word and block reveals, a portrait parallax, and 3D flip cards.
• Awards list with cursor-following cover — the awards section shows an image that tracks the pointer.
• Additional sections — a looping ticker, a pinned services switcher, an image fly-in gallery, an FAQ accordion, and a contact form with loading and success states.
• Markdown case studies — one Markdown file per project in src/content/projects/, with frontmatter fields (title, category, order, role, timeline, year, overview, challenge, images) driving both the home carousel and /projects/<file-name> pages, plus a "next project" link.
• Footer shader and 404 ring — a liquid gradient shader in the footer and a spinning image ring on the 404 page.
• Sora typeface — self-hosted through Fontsource; copy lives in src/content/site.json and styles in src/styles/global.css.

Who is it for?

• Product and motion designers who need a personal portfolio with heavy motion work already wired: edit site.json and Markdown case studies, replace images in public/assets/, and deploy.
• Astro developers who want a reference for module-per-behaviour vanilla TypeScript interactions loaded once from src/layouts/Base.astro.
• Next.js developers who prefer that stack: the same markup and styles are exported to next/, or the folder can be copied out and edited directly.
• Static-host users — the build outputs to dist/ for Vercel, Netlify, or any static host.

How does Elias Vent work?

Run npm install, then npm run dev for localhost:4321, npm run build for dist/, and npm run preview to serve the build. Content is edited in src/content/site.json and src/content/projects/*.md. The contact form has no backend, so it must be pointed at a form service in src/scripts/fx/contact.ts.

Pros and cons

• The contact form requires manual wiring to an external form service.
• Placeholder images are demo-only and must be replaced.
• The Next.js build is generated from the Astro source by tools/astro-to-next.mjs and tools/collect-css.mjs, so keeping both versions means editing Astro files and regenerating.

Pricing

Free and MIT licensed.

FAQ

Is Elias Vent free?

Yes. The theme is MIT licensed, so it can be used and modified freely, with the license text kept. Sora is distributed under the SIL Open Font License 1.1 and is self-hosted through Fontsource.

Does Elias Vent work without WebGL?

The hero carousel falls back to plain images when WebGL is not available, so the site stays usable on unsupported devices. Motion is also reduced when prefers-reduced-motion is set: smooth scrolling, idle animation, and reveals are switched off.

How do I add a new case study?

Add a Markdown file in src/content/projects/ with the frontmatter fields title, category, order, role, timeline, year, overview, challenge, and images. It appears in the home carousel and gets its own page at /projects/<file-name>.

Can I deploy it on any host?

The build outputs plain static files to dist/, so it runs on any static host. On Vercel or Netlify, keep the defaults (build command npm run build, output dist) and update site in astro.config.mjs.