Xcomponents
Reusable React/Next.js UI Component Library
A curated collection of interactive components designed for the Xscriptor ecosystem. Each component is built with framer-motion, follows the Xscriptor design tokens, and is fully typed with TypeScript.
Originally built exclusively for xscriptor.com, these components have since been opened up for broader use — freely available under the MIT license.
XDecryptedText
Animated text that reveals itself through a scrambling effect — characters cycle through random symbols before settling into the final message.
the underlinedwords to interact with this phrase
XInteractivePhrase
Turns individual words into interactive elements — clickable, underlinable, or with blur effects.
XSkillNetwork
An interactive constellation graph that visualises skill relationships with colour-coded nodes and connecting lines.
React
UI library
Next.js
React framework
TypeScript
Typed JS
Node.js
Runtime
CSS
Styling
Rust
Systems
Python
Backend
XStaticGallery
A responsive image gallery grid with configurable columns and scroll-reveal fade-in animations.
XGlassNavbar
A frosted-glass navigation bar with backdrop blur, configurable transparency, and theme-aware styling.
XBookFullDecrypt
A full-text decryption component where words are randomly assigned interaction types — click to reveal blurred content and toggle underlined words.
XMicroGalleryText
A compact gallery that displays up to three images alongside text, with automatic shuffling at configurable intervals.
XSeparator
A decorative divider with configurable orientation, variant, and an optional branded X marker in the centre.
Horizontal
Dashed
Dotted
XZigZagLayout
Alternates child elements left and right in a zigzag pattern with an optional animated connecting line.
XContactForm
A fully configurable contact form with toggleable fields, validation, honeypot spam protection, and mailto-based submission.
XFooter
A full site footer with navigation links, copyright notice, configurable columns, layout direction, and custom color scheme support.
XMinimalFooter
A lightweight footer variant with compact copyright text and optional inline links — ideal for landing pages and minimal layouts.
XCompleteBook
A full book-reading interface with parsed sections, image support, index navigation, and interactive poetry rendering.
Explore the Library
All components are open source on GitHub. Each is self-contained, fully typed, and follows the Xscriptor design system.