Loom
AI agent platform site.
A marketing site for an AI agent platform, built in Next.js 16, TypeScript and Tailwind CSS 4, with one three.js moment: the agent crew sits as matte pucks joined by woven ribbons, and a length of red thread carries a task from one agent to the next while the name tags and the run caption follow it. The sample product is Weft, a crew of support, finance and operations agents where a person signs off on anything that moves money or customer data.
- For
- AI agent platform
- Built with
- Next.js 16, TypeScript, Tailwind CSS 4, Motion, anime.js, three.js
- Pages
- 6 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
The 3D moment
The agent crew as matte pucks joined by woven ribbons; a red thread carries each task from agent to agent and the name tags follow it.
What you get
Straight from the template's README, the same file you will find in the repository.
- Six pages: Home, an Agents library, an Agent page for each agent, Pricing, Sign in and a 404, plus loading and error states.
- A signature 3D hero: your agents as pucks joined by two-sided ribbons that weave over and under each other, with the accent thread playing a real run hand-off by hand-off. Lazy loaded, paused off screen, still under reduced motion, with a matching SVG fallback drawn from the same layout when WebGL is missing.
- Proof under the buttons: three sample figures in the hero, and a live product strip under the scene that follows the run it is playing (current hand-off and status).
- A working run demo on the home page: pick one of three sample tasks and watch it pass from agent to agent, with tool calls, timings, a tool timeout that retries, and a sign-off step you approve or send back. Idle, running, waiting, approved, sent back and closed states, all in a log that never changes height.
- The agent roster as a card-shuffle deck: the agents fan out, close, and the top card tucks under, with Previous, Next and Pause; it stops on hover, focus, off screen and under reduced motion.
- An agents library with a team filter, search and an empty state, and a detail page per agent with its tools and permissions, its limits, a sample run and the agents it hands work to.
- Real product UI built in HTML and CSS (no screenshots, no grey boxes, no icon tiles): agent cards, a thread log, a spend meter, a job brief, a permissions table, sign-off rules and an audit log. Tools are named in type, with their read, draft and write levels.
- A pinned how-it-works story, a guardrails section on a full colour field, a monthly and yearly pricing switch with a full comparison table, and FAQs as native disclosures.
- A sign-in screen with validation, pending and error states (UI only, not connected).
- Light and dark themes (linen by day, the shed after hours) that follow the system, with a switch that opens the new theme as a circle from the button. Both pass WCAG AA (checked by script).
- One content file: every word, price, agent and link lives in
src/config/site.ts. - Self-hosted fonts (Instrument Serif and Albert Sans, OFL), no trackers, no runtime CDN.
- Motion with one tool per job: Motion (
motion/react) for the run demo, the hero strip and the deck; anime.js for the closing weave, drawn line by line; the engine's native CSS, Web Animations and View Transitions helpers for reveals, count-up, the pinned story and the theme switch. - Phone (390 px), tablet and desktop (1440 px) layouts; keyboard and screen reader friendly; visible focus everywhere; reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Agents
- Agent page
- Pricing
- Sign in
- 404
Stack
- Next.js 16
- TypeScript
- Tailwind CSS 4
- Motion
- anime.js
- three.js
What is not included
- No back end: sign in, the run demo and the approval buttons are UI with sample data.
- No real customer logos, photographs or brand marks: every slot is drawn (see
IMAGES.md). - No blog or changelog pages.
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
