Swell Framer Template

About this template

Swell is a template for surf camps, retreats and small stays that want guests to feel the place before they book. Instead of a hero image, the home page is a small 3D world they can explore.

What's inside

Home: the camp as a 3D map. Ride with the arrow keys or WASD, or with a thumb stick on phones. Six places open a card with photos, facts and a link to the next stop. Once a guest has seen all six places, the day ends at sunset with a booking prompt.

Doors to the other pages. A surf school hut, a price kiosk and a booking hut stand by the road. Click one, or ride up and press Enter.

Program: a day at camp, the week day by day and three surf levels.

Pricing: three room cards, included and not included, extras and an FAQ.

Book: a request form with week, room and surf level.

404: a 3D monkey runs off with the page.

Built properly

Text and photos on the cards and pages are native Framer layers, so you edit them on the canvas. Map labels are properties of the world component.

Desktop, tablet and phone breakpoints on every page.

17 text styles and 8 colour styles. Inter only, so there are no font licences to buy.

4 components: Place Card, Page Header, Page Footer and Submit Button.

Rendering pauses off-screen, reduced motion is respected, and without WebGL visitors see a still map.

Ambient sound is synthesised in the browser and stays off until the visitor turns it on.

Page titles, descriptions, a favicon and a social image are set. Every place has its own link, for example /#surf.

Good to know

The 3D camp is a code component. Its layout, buildings and roads are fixed in code, so it suits a beach or surf location as it is.

The 3D engine (Three.js) loads from a public CDN, with a second CDN as a fallback.

Forms are native Framer Forms; receiving submissions needs a paid Framer plan.

All copy, prices, dates and contacts are demonstration content. Photos are AI-generated and included.

No CMS: content lives directly on the pages.