HorizonX docs
What HorizonX is, what is inside the library, and how to use it: Figma and code.
Introduction
How to use it
What is HorizonX?
HorizonX lets you start a project from something real, instead of a blank page. Ask an AI for a website from nothing and you get the average of everything it has seen: a centered hero, three cards, a flat gradient. That is not the model failing; it is the model with nothing to build on.
A layer is that foundation. Each one is a finished piece of design, with motion, depth and atmosphere already worked out. Take it, adapt it, learn how it was built, or use it to kickstart something new. It is a library to inspire and accelerate, not a from-scratch generator.
When to use it
When you want to move fast on something that still looks intentional, and you would rather adapt a strong starting point than design from zero.
How it works
Three steps, and the middle one depends on the format.
Pick a layer
Browse Explore and open anything that fits. Every asset page lists its exact Format, so you know upfront whether it is Figma, code, or a mix.
Copy or download
Figma → copy it into your workspace. HTML → download and open it. Bundles → one download with every file the piece needs.
Make it yours
Restyle it, port it to your framework, or use it as the spark for something new. The craft is done. Your creative direction takes it the rest of the way.
Formats: Figma & code
Not every layer comes in every format. Some are Figma-only, some are code-only, and a few are a mix. Each asset page shows its exact Format upfront, so you always know what you are getting.
Figma file
The editable design, ready to copy straight into your own Figma workspace. Layers, styles and structure intact, ready to restyle and make yours.
Code (HTML)
A self-contained HTML file. Open it, ship it as-is, or port it to React, Svelte or Vue, whatever your stack is. Stack-agnostic on purpose.
Bundle
When a piece needs more than one file (assets, specs or a packaged export), it ships as a bundle you download in one go.
Which AI model do you build against?
There is no single locked model. A lot of the designs are built by hand by our team. Some pieces use Fable, others GPT 5.6, and what we ship is tested to work well across current AI tools.
At the end of the day the quality comes from the team of designers and developers behind each layer, and the creative direction you bring to it. The model is just one tool in that process, not the thing doing the hard part.
The library, three shapes
01Templates
Full pages and standalone heroes. A complete starting point you can adapt end to end, or lift a single screen from.
Sections
Self-contained blocks: sliders, feature grids, pricing, FAQs, forms. Drop one into a project or study how it is built.
Components
The smaller pieces: cards, navs, buttons, micro-interactions. The building blocks behind the bigger layouts.
Editors: the part you build with
Half of HorizonX is a library you download from. The other half is a set of editors that run in your browser. You open one, change what you want, watch the result update as you go, and leave with the file when it looks right.
There are four editor collections. Tools holds interactive components. Textures applies effects to your images and video. Shaders covers animated color and motion. Mockups places your designs in 3D and photo scenes. Each has a live preview, with export formats suited to what you are making.
Try it in your browser
You can open an editor and move every control without an account. A membership is what lets you take the result with you, within your plan's export allowance.
Tools: interactive components you can tune
A tool is not a finished file. It is the generator behind one. Open a tool and the real component runs on the page: a menu that folds open, a gallery that rotates, a button that answers the cursor. Next to it sits a panel with every dial that component has.
Put your own imagery in. Change the direction, the spacing, the duration, the easing curve. The preview is the component itself rather than a recording of it, so what you approve on screen is exactly what you export.
When it looks right, choose a format and export. You get a single HTML file that opens anywhere, a Svelte component, or React JSX. The Svelte and React versions are written from the same document you just approved, so the code you receive cannot drift from the preview you signed off on.
Textures: your own images and video, in another material
Textures starts from media you bring. Pick a look from the collection, drop in your photograph or your footage, and the effect renders it live. A portrait turns into a field of typed characters. A product shot picks up the glow of an old CRT screen. Light becomes halftone ink or iridescent foil.
Every look has controls of its own: the character set, the grid, tone, colour, glow, motion. Move a slider and the preview keeps up with you.
What you can export depends on the look and on what you fed it. Still images come out as PNG or JPEG. Video sources and animated looks offer MP4 or a PNG sequence. Some looks add SVG, ASCII can hand you plain text, and WEB PACK bundles what a website needs. The Export panel only shows the formats your combination actually supports.
Shaders: animated colour, light and motion
A shader is artwork that is drawn in real time instead of played back. Think of the gradient breathing behind a hero, the noise field that follows the cursor, the waves rolling under a headline. None of it is a video file, so nothing loops visibly and nothing softens when the canvas gets bigger.
The controls sit beside the canvas: palette, speed, scale, grain, direction. Change a value and the animation answers on the spot, at full frame rate.
Shaders export the way components do, as HTML, Svelte or React, with the animation source included exactly as the preview runs it. There is no runtime to install and nothing that calls back to us.
Mockups: put your design in a scene
Mockups is a collection of 3D mockups for phones, laptops, tablets, watches and cards.
Open a mockup, drop in your design, then set the angle, lighting, backdrop and frame: 9:16, 4:5, 1:1 or 16:9. 3D scenes can also be animated with the keyframe timeline or Motion presets. Mockups are included in every plan at no extra cost. Without a plan you can open every mockup and try it; exporting needs a plan.
Taking your work out
Export options depend on the editor. Components and shaders hand over code, so they offer the framework targets, the Figma copy and the prompt. Textures hand over finished files. Mockups export PNG or JPG images, MP4 video or an HTML embed. Exports count toward the editor allowance described under “Downloads, limits & resets”.
HTML
One file that holds the markup, the styles and the animation source, with nothing else to install. Open it in a browser, drop it into a page, or hand it to whoever builds the site.
Svelte and React
The same component written for your framework. Both are generated per export from the document you approved, which is why they always match what you saw.
Copy to Figma
On components and shaders, this puts the piece on your clipboard in a shape Figma understands. Paste it into a file and it lands as real layers you can keep designing with, or as a flat image when the artwork has no shapes to describe.
Copy Prompt
On components and shaders, this writes your current setup out as text for an AI tool, with every value you chose. The next section covers what it contains.
Mockup images, video and HTML
PNG, with a transparent background where the scene allows it, and JPG up to 4096 px on the long edge. MP4 video in H.264 with no audio, up to 1920 px on the long edge at 30 or 60 fps; clip presets run from 3 to 15 seconds, and a keyframe timeline can run from 1 to 30 seconds. HTML gives you a live interactive embed, like a component. Each different mockup counts once toward the editor allowance; MP4 videos also count toward their own limit, and HTML never does.
Copy Prompt: hand your setup to an AI tool
Next to Export, on components and shaders, sits Copy Prompt. It reads your current setup and writes it in plain words, ready to paste into Claude, Cursor, ChatGPT or another AI tool. Textures and Mockups have their own export panels instead.
What the prompt carries
- The name of the piece and the one line description from its catalogue page.
- The framework you picked, so the answer comes back as HTML, Svelte or React instead of a guess.
- Every setting at the exact value you just chose, grouped the way the controls panel groups them.
- The house rules we would ask for anyway: fill the container, stay sharp on a high resolution screen, hold still for anyone whose system asks for reduced motion, and ship working code with no placeholders.
- A link back to the original page, so the model can be pointed at the source.
The point is that the model starts from your decisions instead of averaging everything it has ever read. Ask it to rebuild the piece in your stack, restyle it to your design system, or take the idea somewhere we never went.
The prompt is written from what the editor already knows, so it costs nothing to produce and works even while the artwork is still loading.
Why some assets are Figma-only (and others code-only)
We build each piece in the medium it lives best. A design-first layout with heavy visual detail lives naturally in Figma, so that is what ships. A code-first or generative piece (motion, interaction, 3D) makes more sense as HTML. Rather than force a half-baked version in every format, we deliver each layer in the format that actually does it justice. Some come in more than one; the asset page shows exactly what you get.
Why some code is delivered only as HTML
HTML is stack-agnostic and self-contained. One file that opens anywhere, is easy to read, and ports cleanly to React, Svelte, Vue or plain static hosting. Shipping the HTML gives you the full result without locking you into a framework: you own the port to whatever you actually build in. For server-side rendering and SEO, drop it into your framework of choice.
Inspiration vs production
Both, and we want to be realistic about it. The craft is production-grade: polished, real, built by a senior team. But a lot of layers are meant to inspire a project or get you off the ground fast, not to be a drop-in that fits every context untouched. Use them as a strong starting point, then bring your own direction.
Licensing & access
Any active subscription unlocks the entire library, with no separate purchases. HorizonX products are yours under a commercial license: use and adapt them freely in your own personal, client and commercial projects. You may not resell, redistribute or sublicense the source files themselves. Open-source packs keep their authors' license, which is included in the download.
Downloads, limits & resets
Every plan unlocks the whole library, and browsing it has no limits. The allowances below apply when you download or export. Library downloads use two separate buckets, so a busy day of regular downloads never eats into your Premium allowance. Exports from the editors have an allowance of their own.
Regular assets · daily
Components, sections, design systems, palettes and assets: Starter 10 · Pro 25 · Max 50 downloads per day. Resets every day.
Premium items · monthly
Select top-tier pieces marked with a Premium badge (a gold crown): Starter 5 · Pro 12 · Max 25 per month. Resets on the 1st.
Editor exports · per day and per 30 days
Exports from the Tools, Textures, Shaders and Mockups editors share one allowance of different items, by plan: up to 30 a day and 100 every 30 days on Starter, 60 and 200 on Pro, and 150 and 600 on Max. The day is a rolling 24 hours. Exporting an item again within 30 days does not count again, whatever the format, so as many PNG or JPG images of the same mockup as you need count as one item.
Mockup videos (MP4) · every 30 days
On top of the editor allowance, MP4 videos have their own limit over a rolling 30 days: 20 on Starter, 100 on Pro and 400 on Max, or 5 if your only access is a trial. A second video of the same mockup within 10 minutes does not count again, so a retry or a small tweak is free. On a Max team, each teammate has their own count at the plan's limits.
Exports from your AI agent (MCP) · daily
Components, texture looks, shaders and mockup HTML embeds your AI coding agent exports through MCP, by plan: up to 30 different ones a day and 100 every 30 days on Starter, 60 and 200 on Pro, and 150 and 600 on Max. The day resets at midnight UTC, and something already exported never counts again.
Two more things worth knowing: re-downloading something you already have never counts twice, and a product made of several files counts as a single download. Each Premium item's page shows how many Premium downloads you have left for the month.
Exports from the Tools, Textures, Shaders and Mockups editors never count toward Library download allowances. Library files your AI coding agent downloads for you through MCP count as regular downloads.
Guides
Figma → Code with AI
Many HorizonX layers are Figma-only: a design with 3–4 polished sections, no code attached. You can turn them into a fully working website by connecting an AI coding agent (like Claude Code) to Figma via the Figma MCP. Here is how.
The idea
Share the Figma file with Claude Code and use a structured prompt to recreate each section with pixel-perfect fidelity. Once it has developed the existing sections and understands the visual language (layout, spacing, typography, colors), you can ask it to generate additional sections that follow the same style and feel consistent with the original design.
The workflow
Read before you write
Ask the agent to use the Figma MCP to read the design first: structure, tokens (colors, typography, spacing, radii), and a reference screenshot. It should not generate code yet. If a value does not come from the MCP, the agent should tell you instead of inventing it.
Provide assets manually
The Figma MCP does not always extract every asset correctly. Images may be missing, compressed, or incorrectly referenced. Complex elements like gradients, masks, shadows, blend modes and textures may not reproduce accurately. When that happens, export them directly from Figma: images as WebP or PNG (depending on transparency), icons and logos as SVG, and complex gradients or effects as SVG when CSS cannot match them.
Establish the design system first
Before the first section, extract the tokens (colors, typography scales, spacing, radii, shadows, breakpoints) and centralize them in a single place: Tailwind config, CSS variables file, or theme. Name them semantically. Componentize reusable pieces (buttons, headings, containers). This is what makes sections 2, 3, 4 come out fast and consistent instead of reinventing the wheel each time.
Build one section at a time
Implement one section, then compare it directly against the original Figma design at the same screen size. Check spacing, font sizes, line heights, alignment, image positioning, gradients, border radii and responsive behavior. Correct any differences before moving to the next section. This gives you a much more accurate result than asking the agent to recreate the entire page at once.
Extend beyond the original
Once the existing sections are built and the design system is established, ask the agent to create new sections (pricing, FAQ, testimonials, contact) that follow the same visual language. The design system tokens and components you set up make this fast and consistent.
Tips
- Make sure the Figma URL includes the
node-idof the specific section, not the whole file. - Organize exported assets into clearly named folders before giving them to the agent.
- Provide the correct fonts, responsive breakpoints, hover states, and animation specs.
- Specify your stack (Astro, Next.js, React, etc.) upfront. If you do not, the agent will assume one.
Reusable prompt template
Copy this prompt and paste it into Claude Code (or any AI coding agent with Figma MCP access). Fill in the Figma URL and your stack.
I want you to replicate this Figma section in code with PIXEL-PERFECT fidelity. SOURCE - Figma: [PASTE URL WITH node-id] - This is ONE section of a larger landing page. We will build the remaining sections later, reusing whatever you define here. STACK - [e.g. Astro + Tailwind / Next + CSS Modules / React + styled-components] - Package manager: pnpm PHASE 1: READ (do not write code yet) 1. Use the Figma MCP on the exact node: - get_design_context → structure + reference styles - get_variable_defs → real tokens (colors, typography, spacing, radii) - get_screenshot → reference image to compare against - get_metadata → node hierarchy if the section is complex 2. If a color, spacing or size does not come from the MCP, tell me instead of inventing it. PHASE 2: ASSETS - Images, photos, complex gradients, textures, videos, custom icons, logos, or anything else that cannot be reproduced 1:1 with pure CSS/SVG: STOP and ask me to attach it. List what you need (layer name + purpose). - Pure CSS gradients / shadows / borders: reproduce them from the tokens. PHASE 3: DESIGN SYSTEM - Extract tokens into a single place (Tailwind config / CSS vars / theme): colors, typography, spacing, radii, shadows, breakpoints. - Name them semantically (bg-surface, text-primary, etc.). - Componentize reusable pieces (buttons, chips, headings, containers). PHASE 4: BUILD - Build ONLY this section using the tokens from Phase 3. - Responsive: respect the design's breakpoints. If Figma only shows desktop, tell me and propose mobile behavior before coding. - Semantic, accessible markup (headings, alt, aria). PHASE 5: VERIFY - Compare your result against the get_screenshot reference. - Report remaining differences. - Final visual sign-off is mine.
Working with HTML layers
HTML layers are self-contained files: one file with everything (markup, styles, scripts) that opens in any browser. Here is how to get the most out of them.
Preview instantly
Download the HTML file and open it in your browser. That is the full result, with no build step and no dependencies. This is your reference for what the section should look and feel like.
Port to your framework
The HTML is intentionally stack-agnostic. Give it to Claude Code or your AI coding agent and ask it to port the section to your framework: React, Svelte, Vue, Astro, Next.js. The agent can read the markup, extract the styles, and recreate it in your component structure. Feed it the HTML file directly so it has the exact reference.
Extract the design system
Just like with Figma layers, ask the agent to extract the tokens (colors, typography, spacing, radii) and set them up in your project's design system before porting. This way you can add more sections later and they will be visually consistent.
Replace placeholders
Some HTML layers include placeholder images or demo copy. Swap them with your own content, images, and branding. The structure and styles stay. Only the content changes.
Tip
If the HTML file includes animations, interactions or third-party scripts that do not port cleanly, open the original file in a browser, study how it behaves, and describe the behavior to your AI agent. Sometimes a description is more effective than trying to parse minified JS.
FAQ
Any active subscription includes the whole library. No separate purchases. Open an asset and its format actions (Copy Figma, Download HTML, and so on) appear. Sign in, head to Explore and start pulling what you need.
Two independent allowances by plan. Regular assets: 10 (Starter), 25 (Pro) or 50 (Max) downloads per day, resetting daily. Premium items (the ones with a gold Premium badge): 5, 12 or 25 per month, resetting on the 1st. Browsing is always unlimited and re-downloads never count twice.
Yes. Your subscription includes a commercial license for HorizonX products. Use and adapt these files in your own personal, client and commercial projects at no extra cost. Open-source packs keep their authors' license, which is included in the download.
No. You may use and adapt them freely in your own projects, but you may not resell, redistribute or sublicense the source files themselves.
Yes. We release new drops regularly, and everything we add is included in your subscription while it is active, at no extra cost.
No. You can open a tool, texture, shader or mockup and move every control without signing up. Taking the result with you needs a membership.
No. There is nothing to install and nothing that phones home. Simple pieces come out as plain markup and CSS, and the ones that need a real timeline carry the animation source with them, which is the same source the preview was running.
No. Mockup exports never use the library's daily or Premium monthly download limits. Each different mockup counts once toward the editor allowance you share with Tools, Textures and Shaders, and MP4 videos also have their own limit.
Over a rolling 30 days: 20 on Starter, 100 on Pro and 400 on Max, or 5 if your only access is a trial. A second video of the same mockup within 10 minutes does not count again. On a Max team, each teammate has their own count at the plan's limits.
Browse the library.
Open Explore, find a layer, and start building from something real.