# HorizonX > HorizonX is a premium UI component library for the vibecoding era: production-ready React & Tailwind components, Figma templates and UI kits for designers and developers building with Cursor, Lovable, and v0. The same membership includes 3D models in glTF 2.0 and UI and game sounds in WAV + MP3 under CC0 1.0, and open-source SVG icon sets under their authors' MIT, ISC or Apache 2.0 licences. HorizonX's own products are designed in-house and delivered under a commercial license, and third-party assets keep their authors' licenses: one subscription, full library access. ## About - [About HorizonX](https://horizonx.so/about-us): What HorizonX is, who it's for, and the subscription positioning. - [Pricing](https://horizonx.so/pricing): Membership plans with daily access to the full library of premium UI kits, components, templates and assets, plus exports from every tool, texture, mockup and shader editor within a shared allowance that grows with the plan; re-exporting an item you already exported is free. The MCP server lets an AI coding agent search, customize and export components within a daily allowance. ## Explore the library - [Explore](https://horizonx.so/explore): Browse premium UI kits, components, Figma templates and design assets. - [Tools](https://horizonx.so/tools): Live in-browser editors. Configure a component and export the code on every plan. Each tool has its own page under /tools/. - [Textures](https://horizonx.so/textures): Generative texture looks such as ASCII, dither, halftone and CRT, each editable in the browser under /textures/ and exportable on every plan. - [Shaders](https://horizonx.so/shaders): Real-time WebGL backgrounds you tune live and export as HTML, Svelte or React on every plan. Each shader has its own editor under /shaders/. - [Icons](https://horizonx.so/icons): 12 open-source SVG icon libraries, among them Lucide, Heroicons, Phosphor, Tabler and Material Symbols. Each downloads as a complete set under its authors' own MIT, ISC or Apache 2.0 licence. - [3D Models](https://horizonx.so/3d-models): 520 real-world-scale 3D models (furniture, props, plants, decor) as glTF 2.0 with PBR textures, CC0 1.0 public domain, ready for Blender, three.js, Unity, Unreal and Godot. Each model has its own page under /explore/. - [Sounds](https://horizonx.so/sounds): 1,346 UI sounds and game sound effects (clicks, toggles, notifications, 8-bit, explosions, voice lines). Each one plays in the browser before download and comes as WAV + MP3 under CC0 1.0, so no credit is needed. Each sound has its own page under /explore/. - [Mockups](https://horizonx.so/mockups): 3D mockups for phones, laptops, tablets, watches and cards. Add your design, set the angle, lighting, backdrop and frame, and animate with a timeline. Export PNG/JPG up to 4096 px, MP4 up to 1920 px at 30/60 fps for 3–15 seconds, or an interactive HTML embed. Included in every plan; MP4 videos have their own 30-day limit (Starter 20, Pro 100, Max 400). Each mockup has its own editor under /mockups/. ## MCP - [HorizonX MCP](https://horizonx.so/mcp): Agents search components, textures, mockups and shaders, then export HTML, Svelte or React code. Mockups return interactive embeds of your artwork, not PNG/JPG/MP4 renders; make those in the browser editor at the returned URL. Mockups share the editor allowance: Starter 30 different items a day / 100 per 30 days, Pro 60/200, Max 150/600. Re-exporting the same item within 30 days does not count again. ## Resources - [Documentation](https://horizonx.so/docs): How to use the library, customize editors, export and understand access requirements. - [Vibecoding guide](https://horizonx.so/vibecoding): A practical guide to building interfaces with AI and reusable UI assets. - [Blog](https://horizonx.so/blog): Articles on UI/UX, design systems, components and vibecoding workflows. - [FAQs](https://horizonx.so/faqs): Common questions about HorizonX, licensing and subscriptions. - [Vibe Coding UI Specification](https://horizonx.so/resources/vibe-coding-ui-specification): Vendor-neutral contract for tokens, components, states, responsive behavior, accessibility, motion and UI acceptance checks. - [Vibe Coding UI Production Readiness](https://horizonx.so/resources/vibe-coding-ui-production-readiness): A 15-point evidence-based checklist for assessing whether an AI-generated interface is ready for production. - [How to Ask an AI Agent to Build Your First Screen](https://horizonx.so/resources/ask-an-ai-agent-to-build-your-first-screen): Beginner guide. A simple form to fill in before you ask an AI agent to build a screen, with six examples of a weak request and a better one. - [Turn Vague Words Into Clear Instructions](https://horizonx.so/resources/turn-vague-words-into-clear-instructions): Beginner guide. Words like "premium" or "smooth" mean nothing to an AI agent. Turn 16 common words into rules it can follow and you can check. - [Words to Know: A Simple Glossary for Building With AI](https://horizonx.so/resources/words-to-know-glossary): Beginner guide. Short, plain explanations of the words you will hear when you build websites and apps with AI, and what "done" really means. - [A Small Instructions File Your AI Agent Will Read](https://horizonx.so/resources/a-small-instructions-file-your-agent-will-read): Beginner guide. A short file that makes your AI agent follow the same rules every time, with a ready-to-copy version and a two-minute test. - [Build One Part From Start to Finish](https://horizonx.so/resources/build-one-part-from-start-to-finish): Beginner guide. Follow one small slider from the first request to the finished version: every step, the usual mistakes and how to fix them. - [Low Score on the Checklist? Fix These First](https://horizonx.so/resources/low-score-on-the-checklist-fix-these-first): Beginner guide. Got a low score on the Production Readiness Checklist? What to fix first, with a ready message for your AI agent for each problem. - [You Downloaded a UI Kit. Now What?](https://horizonx.so/resources/you-downloaded-a-ui-kit-now-what): Beginner guide. What to open first, what to check, and how to give a UI kit to your AI agent so it builds with it instead of ignoring it. - [How to Ask for Animations](https://horizonx.so/resources/how-to-ask-for-animations): Beginner guide. Describe any animation in five answers: what moves, what starts it, what changes, how long it takes and how it ends. - [Every State of a Button](https://horizonx.so/resources/every-state-of-a-button): Beginner guide. A button has at least eight states. See each one, why it matters, and how to ask your AI agent for all of them. - [What Changes on a Phone?](https://horizonx.so/resources/what-changes-on-a-phone): Beginner guide. Decide before you build what each part of your page does on a phone, a tablet and a computer, so your AI agent does not guess. - [Hand Over a Website to a Client](https://horizonx.so/resources/hand-over-a-website-to-a-client): Beginner guide. Collect what you need from a client once, track every request, and deliver the finished site with checklists and email templates. - [SEO Basics for Your First Website](https://horizonx.so/resources/seo-basics-for-your-first-website): Beginner guide. Help people find your website on Google: titles, descriptions, headings, images, sitemaps and redirects, explained in plain English. ## Assets - [Lotus Perfume](https://horizonx.so/explore/lotus-perfume): Scroll-driven 3D perfume landing page: a lotus blooms on a stone in a pink sea, a ruby bottle rises and mists, then dives to an underwater showroom. - [Plasma Orb](https://horizonx.so/tools/plasma-orb): A glass sphere full of living plasma, ray traced in WebGL 2: electric filaments swirl around a bright core and the whole orb brightens when the pointer… - [Altura Coastal Residences](https://horizonx.so/explore/altura-coastal-residences): A luxury real estate landing with a layered dusk hero and a scroll-driven walkthrough of one coastal home. - [Bloom Widgets](https://horizonx.so/explore/bloom-widgets): 30 animated, interactive gradient widgets for health, weather, analytics, home and everyday. React, Motion and Tailwind CSS. - [Tulip Study](https://horizonx.so/textures/tulip-study): Coral tulips, blue skies and a fine field of repeating characters. Tune the photographic ASCII overlay live. - [Kurage Dashboard](https://horizonx.so/explore/kurage-dashboard): A dark AI-assistant dashboard with live ASCII jellyfish, a rotating task headline, a glass prompt composer and a ⌘K command palette. - [Spiral Flux](https://horizonx.so/tools/spiral-flux): Photos ride a turning spiral; at its edges they flare, streak and pick up a colour rim. - [Marble Signal](https://horizonx.so/textures/marble-signal): Classical marble, white pixels and deep black shadows. Edit the ordered dither pattern live. - [Hadal](https://horizonx.so/explore/hadal): A deep-sea GPU compute landing page with a WebGL hero, pinned scroll story and Lenis smooth scroll. - [Cobalt Sphere](https://horizonx.so/tools/cobalt-sphere): A cobalt satin sphere with sculptural folds, soft studio light and slow organic motion. - [Warm Press](https://horizonx.so/textures/riso-glow-default-look): Turn images and video into warm halftone prints. Edit Warm Press live. - [Tunnel Fold Slider](https://horizonx.so/tools/tunnel-fold-slider): A WebGL slider seen from inside a tunnel: cards grow and turn toward the lens, then smear into streaks with a spectral fringe as they leave the frame. - [Cobalto](https://horizonx.so/explore/cobalto): A landing page for design and development studios, built as one real-time 3D world with Lenis smooth scroll that settles on each scene. - [Sky Lattice](https://horizonx.so/textures/sky-lattice): Turn any image into a coarse lattice of navy dots on paper tinted by the picture. Edit Sky Lattice live. - [Alder & Stone](https://horizonx.so/explore/alder-stone): A scroll-driven one-page site for an architecture and interiors studio, opening on a 3D point-scan city built with three.js. - [Assistant Pill](https://horizonx.so/tools/assistant-pill): A voice and chat assistant bar that fills the screen: a live plasma orb you tap to talk, example prompts that drift through the empty field, and answers… - [Jumbotron](https://horizonx.so/textures/jumbotron): Turn your image or video into glowing rows of screen-like marks. - [Sorvine](https://horizonx.so/explore/sorvine): Dark AI landing page with particle hands that form, react to the pointer and morph across three scroll scenes. - [HorizonX Glow](https://horizonx.so/tools/horizonx-glow): The HorizonX mark as lit glass on black: light sweeps from petal to petal with hard highlights, a coloured rim and a soft bloom. - [Glyph Study](https://horizonx.so/textures/ascii-default-look): Turn your image into a field of monochrome characters. Adjust the grid, type and tone in the live editor. - [Crest Water Hero](https://horizonx.so/explore/crest-water-hero): A 3D credit card floats over a live sunset sea, with a ring on the horizon, real reflections and a wake that follows the pointer. - [Chromatic Orb](https://horizonx.so/tools/chromatic-orb): A liquid glass orb in WebGL 2: its rippled skin splits light into thin rainbow lines, with soft reflections moving inside, in a slow motion that never… - [Silver Hound](https://horizonx.so/textures/silver-hound): A soft monochrome shepherd portrait with silver-like grain. Tune focus and grain live. - [Orvane AI Particle Hero](https://horizonx.so/explore/orvane-particle-hero): A WebGL2 hero where a 3D-scanned human bust, drawn in 150,000 light particles, scatters under the cursor. - [Pulse Orbit](https://horizonx.so/tools/pulse-orbit): An editorial artwork orbit that pauses, advances one card and settles with a soft bounce. - [Arena Glyph](https://horizonx.so/textures/arena-glyph): Build your subject out of a glowing glyph mass and let the background stay dark and empty. Edit Arena Glyph live. - [Cyber Jackets](https://horizonx.so/explore/cyber-jackets): A 3D fashion-drop landing page in Three.js: three neon leather jackets, one world per colourway. - [Sleek Effort Slider](https://horizonx.so/tools/effort-slider-sleek): A monochrome effort slider that gathers colour with every stop and, at the top, wraps the card in a soft living light. - [Yohaku Tunnel Hero](https://horizonx.so/explore/yohaku-tunnel-hero): A one-screen studio hero: a centered headline and two calls to action above a WebGL picture tunnel that folds as you drag it. - [Comet Glass](https://horizonx.so/tools/comet-glass): A field of frosted glass tiles lit by a blue comet that follows the pointer and leaves a violet trail behind it. - [Rootline Land Intelligence Hero](https://horizonx.so/explore/rootline-hero): A SaaS dashboard rises between two rocks that sprout moss under the pointer, below a floating frosted navigation bar. - [Axle Bloom](https://horizonx.so/tools/axle-bloom): A WebGL photo wheel: portrait cards hinged on one glowing axle turn like a rolodex, easing into each card and smearing with a colour fringe as they spin. - [Reel Flux](https://horizonx.so/tools/reel-flux): An endless photo ribbon that bends into a flowing wave as you drag or scroll, then settles flat. - [Halovane Hologram Simulator](https://horizonx.so/explore/halovane): Interactive particle hologram: a shimmering particle shell projects 3D models, morphs between poses and ripples under your cursor. - [Emberline Fire Hero](https://horizonx.so/explore/emberline-fire-hero): A one-screen SaaS hero for an analytics product: a headline, one-line description and two buttons above a revenue dashboard that rises out of a burning… - [Prism Orb](https://horizonx.so/tools/prism-orb): An iridescent glass orb in WebGL 2: soft bands of cyan, violet, magenta and amber turn inside a glassy rim with a notch that travels around its edge, in a… - [Crystal Cube](https://horizonx.so/tools/crystal-cube): A beveled crystal cube with spectral refraction, studio reflections and sharp interactive rotation. - [Stillform](https://horizonx.so/explore/stillform): A calm landing page for a creative residency, with a real-time 3D studio-table hero and smooth scroll-driven sections. - [Glow Grid](https://horizonx.so/tools/glow-grid): A dark tile grid lit from behind, with light escaping through the seams and a floating logo block that tilts toward the pointer. - [NOTARA Perfume Atelier](https://horizonx.so/explore/notara-perfume-atelier): A landing page for a bespoke perfume atelier, with a page-opening reveal, scroll-driven sections and Lenis smooth scroll. ## Optional - [Full catalog](https://horizonx.so/llms-full.txt): Every published library asset, tool, texture, enabled mockup and shader at its canonical page. The Assets list above is a sample; this is the complete listing.