This is the full template running in a frame. Scroll inside it, open its menu, or open it in its own tab to see it at full size.
What moves
- The page fades up on load.
- Hovering a tile zooms its image and swaps the colour wash for a dark one.
- The menu button slides a full-height menu in from the right and dims the page.
The motion is HTML5 UP's own CSS transitions and a small jQuery script, both unchanged. The page still works without JavaScript; it just skips the intro.
What we changed: only the colours
We swapped the original palette for Enrichr's deep green, cream, brand greens and lime. Everything else is HTML5 UP's: the HTML, the animation script, the layout, fonts, icons and images. Colours with transparency keep their original opacity.
| Original | Enrichr |
|---|---|
#ffffff | #fbf8f1 |
#585858 | #3a4a44 |
#c9c9c9 | #c9cbc2 |
#f6f6f6 | #f1ede3 |
#333333 | #0c1e18 |
#909090 | #0c1e18 |
#f2849e | #005236 |
#ee5f81 | #003d28 |
#7ecaf6 | #4b1a9a |
#7bd0c1 | #1a7a4c |
#c75b9b | #e54c1e |
#ae85ca | #085e3d |
#8499e7 | #126e45 |
Some accents are swapped only where they read well: #0c1e18 replaces #585858 on the slide-in menu; #0c1e18 replaces #585858 on primary buttons; #005236 replaces #585858 on ticked checkboxes and radio buttons.
How to use it
- Download the .zip and unzip it.
- Open
index.htmlin a browser to check it, then edit the text, links and images in it. - Upload the whole folder to any static host (Netlify, Vercel, GitHub Pages or your own server).
The zip also holds HTML5 UP's README.txt and LICENSE.txt, the Sass source, and ENRICHR-COLOURS.txt, which lists every colour change.
Prompt for your AI assistant
Paste this into Claude, Cursor or ChatGPT together with the unzipped folder.
I downloaded the "Phantom tile portfolio" site template (by HTML5 UP, recoloured in Enrichr colours) from https://enrichr.dev/templates/html5up-phantom.html.
Unzip it and edit index.html for my site: [describe your site, its sections and tone].
Rules:
- Replace the placeholder text, links and images with mine. Keep image sizes close to the originals.
- Do not change assets/css/main.css or anything in assets/js: the layout and animations depend on them.
- Keep the class names and the HTML structure of each section, so the animations still run.
- Keep the "Design: HTML5 UP" credit in the footer (the CC BY 3.0 licence requires it).
Verify: open index.html in a browser, check there are no console errors, that the animations still play, and that it works at 375px wide.The template as JSON: /templates/html5up-phantom.json.
What it is for
A work or case-study index where each tile links to a project page.
| Section | Full one-page site |
|---|---|
| Techniques | Pointer interaction, Reveal and intro |
| Stack | HTML, CSS, jQuery |
| Mood | light, playful |
| Original | Phantom on html5up.net |
Licence and credit
Phantom is a free template by HTML5 UP (AJ (@ajlkn)), released under the Creative Commons Attribution 3.0 licence. You can use it in personal and commercial projects as long as you credit HTML5 UP; the template's footer already does, so leave it in. Enrichr changed only its colours. HTML5 UP is not affiliated with Enrichr and does not endorse this version.
More templates
FAQ
Is this free for client work?
Yes. HTML5 UP releases it under Creative Commons Attribution 3.0, which allows personal and commercial use as long as you credit HTML5 UP. Keep the credit in the footer.
Did you change the animations?
No. Only colour values changed. The HTML, the jQuery script and every transition are exactly as HTML5 UP wrote them, and we checked that the page behaves the same as the original.
Can I use different colours?
Yes. Edit the colour values in assets/css/main.css. ENRICHR-COLOURS.txt in the zip lists each one we changed, so you can find them quickly.