MAREA
The tin is drawn in 3D with three.js and opens in four steps as you scroll: tuna belly, anchovy fillets, mussels in escabeche and razor clams. Around it, what a small food shop needs to sell.
49 €VAT included · one-time payment
- Size
- ~900 KB
- Languages
- English and Spanish
- Build
- None
The template
What it includes
Real-time 3D tin
It opens as you scroll, in four steps. Each step is a product from the range.
- Tuna belly
- Anchovy fillets
- Mussels in escabeche
- Razor clams
Sea shader
A shader written for the template. It lowers its quality on slower devices to keep the page smooth.
Collection and quick view
A product grid and a detail window that opens without leaving the page.
Basket with gift option
A side basket with a gift option and a bar that shows how much is left for free shipping.
Boxes and club
Cards for boxes and a subscription, with a 3D photo of each box.
Batch traceability
Pick a batch to see its path from the catch to the packing.
A checkout you connect with one option
The demo checkout works out of the box. To take real payments, set checkoutUrl to a Stripe Payment Link, a Shopify checkout or any other gateway.
English and Spanish
A language switch that changes the texts live, with no reload.
Accessible, with a fallback
It works with the keyboard and respects reduced motion. Without WebGL it shows an SVG fallback instead of the 3D tin.
Screenshots
The demo, screen by screen
Click an image to enlarge it. The arrow keys move between images and Esc closes the viewer.
Specifications
Under the hood
- Stack
- HTML, CSS and plain JavaScript
- 3D and motion
- three.js (MIT) and GSAP Standard No Charge, included in the zip
- Build
- None. No framework, no bundler, no packages to install
- External requests
- None. Fonts and libraries are served from your own host
- Size
- A zip of about 900 KB
- Languages
- English and Spanish, with a live switch
- Browsers
- Current browsers with WebGL. Without WebGL, an SVG fallback is shown
- Hosting
- Any static host: Netlify, Vercel, Cloudflare Pages, GitHub Pages
- Payments
- Stripe Payment Links, Shopify or any gateway through the checkoutUrl option
- Accessibility
- Keyboard navigation and support for reduced motion
FAQ
About MAREA
How do I take real payments?
The checkout in the demo is for show. Set the checkoutUrl option to a Stripe Payment Link, a Shopify checkout or the link of any gateway, and customers are sent there to pay.
What happens in a browser without WebGL?
The 3D tin is replaced by an SVG fallback and the shop keeps working. The sea shader also lowers its quality on slower devices.
Can I change the products and the tin?
Yes. Prices, colours and batches are in products.js and every text is in i18n.js. The guide explains how to change the paper wraps, the colours and what is inside the tin: loins, fillets, mussels or razor clams.
Licence, payment and download: general questions
Open the demo, then decide.
- The templateThe shop in HTML, CSS and JavaScript, with three.js and the fonts included.
- Bilingual documentationA docs/index.html page in English and Spanish, with a section on common problems.
- Licence and creditsThe licence in plain terms, and the credits for three.js (MIT), GSAP and the fonts (SIL OFL).