Premium
Kai Rennard
A cinematic motorsport portfolio with fluid WebGL interactions and scroll-driven storytelling.
HorizonX CodeCollection
Portfolio Templates for Creatives & Studios
Portfolio templates for presenting selected work: a personal motorsport portfolio and four creative studio portfolios with editorial type, scroll-led motion and case study layouts. Choose first by whose work the site shows, one person or a studio, then by how much motion your projects can carry.
- 5 designs
- Made by the HorizonX team
- Read the guide
HorizonX Code
What is inside
Kai Rennard is a cinematic motorsport portfolio with WebGL interactions and scroll-driven storytelling. Cinderline is an editorial studio portfolio with atmospheric case studies, built with React, Vite and TypeScript. NOVARA pairs bold type and dark editorial imagery with ScrollTrigger motion. KILN is a motion-led portfolio for a design and code studio with a 3D work stack, and Velmora is a creative studio landing with a portfolio flow that leads to an enquiry.
Personal portfolio or studio site?
A personal portfolio sells one person's work and judgement, so it leads with a name, a point of view and a few projects shown in depth. A studio site also has to explain services, process and how to start a project. Start from Kai Rennard for a single-person showcase, and from Cinderline, NOVARA, KILN or Velmora when the site speaks for a team. For pages that sell a service more than a body of work, compare the agency website templates.
Customize and integrate
Replace the sample projects with your own, starting with three to six pieces you can explain: the brief, your role and the result. Check each template's tags for its stack before integrating; several use GSAP, KILN adds Lenis smooth scrolling and Cinderline is built with React, Vite and TypeScript. Keep one case study layout for every project so visitors can compare them quickly.
Before publishing
Compress project images and video, give every project a descriptive title and alt text, and keep project links and contact routes usable with reduced motion. Test scroll-driven sections on a phone, where WebGL scenes and long pinned sections cost the most.
What should a portfolio website include?
Your name and what you do, a small set of selected projects with your role in each, a short about section and a clear way to get in touch. Case studies that explain the problem and the outcome persuade better than a long grid of thumbnails.
How is this different from the agency templates collection?
Agency templates focus on studios and consultancies selling a service. This collection focuses on showing work, including a personal portfolio. Several studio portfolios appear in both because they serve both purposes.
Do I need to code to use these templates?
Yes. They are coded templates, so expect to edit components, replace media and tune motion settings. Check the tags on each template for the framework and animation libraries it uses.
From the blog
Guides
Keep exploring
Related collections
Find the next design for your project
Browse every design in the HorizonX catalog, from UI kits and templates to textures, shaders and mockups.