Teo Corran

Teo Corran is a 3D portfolio template for art directors, filmmakers, photographers and designers. The site opens on a live sea. A tall ship sails between three islands, and each island opens one part of the portfolio: About, Work and Contact.

Click a link in the header or an island in the scene. The ship turns, sails, slows down and berths at the pier. A small figure walks ashore and the panel opens. Visitors can also steer by hand with W A S D or the arrow keys, drag to look around and scroll to zoom. On tablets and phones a touch stick does the steering.

The scene runs in the browser with real 3D. Waves catch the sun, gulls circle the islands and a faint rainbow sits on the horizon. A moon button turns it to night with stars, lit windows, a turning lighthouse beam and a passing comet. A sound button adds a calm loop with sea sounds.

Work lives in the CMS. Each project takes a cover image or a cover video, a summary, process, client, year, services and up to five media slots, each an image or a video. Case study pages keep the details sticky on the left beside a column of media. Every image and video opens in a full screen viewer with Close, Previous, Next and a counter.

What is included

• Home with the 3D scene, Work, case study pages, Styleguide, Imprint and 404

• Projects CMS with six sample case studies

• Desktop, tablet and phone layouts

• Liquid glass header and a full screen phone menu

• Animated footer wordmark

• Every text on a style and every colour on a token

• Scene controls: swap the ship and island models, set sea and sky colours, time of day, labels and your own music file

• Framer Skills for the design system and customization

Inter Display throughout. All people, clients and contacts in the demo are fictional.

Made by AidanCreates.