Credits

Where the interface comes from

• shadcn/ui Buttons, inputs, cards, sidebar, slider, switch, tabs, tooltip, dropdown, sheet, avatar, badge, skeleton, separator.
• Magic UI Interactive Grid Pattern, Interactive Hover Button, Shimmer Button, Ripple Button, Shiny Button, Number Ticker, Text Reveal, Confetti.
• Aceternity UI The Highlight behind the line on the front page.
• ReUI Most of the dashboard: every uploader (from its file upload), the file and admin tables (Data Grid and Filters), link reordering (Sortable), the expiry calendar (Date Selector and Time Picker), the number fields beside the sliders, the font search (Autocomplete), the getting-started steps (Stepper), the admin log (Timeline), the recovery-code blocks (Code Block), and the alerts and badges throughout. All 83 of its components and hooks are part of the dashboard, coloured to match it.
• Simple Icons The brand logos in the profile dock, filled like preinfection's (CC0).
• Material Symbols The email, website and link glyphs in the dock (Apache 2.0).
• discord-decoration.art The full catalogue of Discord avatar decorations and how they are grouped, and the files for the ones avatardecoration.com does not carry.
• Outfit The typeface across the whole site, by Rodrigo Fuenzalida. SIL Open Font License, served from this site.
• mezotv/discord-badges The icons for every Discord badge a profile can wear: Nitro tiers, boosts, orbs, quests and the rest. MIT licensed.
• avatardecoration.com The animated files for most of the Discord avatar decorations a profile can wear.
• Discord The avatar decorations themselves, and the badge icons shown for a linked account.
• Lanyard Live Discord status and activity, for anyone who adds their Discord id.

What it runs on

• Next.js The framework everything except the profile pages is built with.
• React What every component on the site is written in.
• Tailwind CSS Every class on the site.
• Motion The animation library behind the highlight and the hover buttons.
• Radix UI The unstyled behaviour under the dialogs, switches, sliders and menus.
• Lucide The icon set, and the source of all 69 built-in badges.
• Geist The typeface, by Vercel.
• Sonner The toasts.
• canvas-confetti The burst when you publish.
• three.js The 3D engine behind the opening.
• input-otp The six-digit code field.
• clsx and tailwind-merge Joining class names without them fighting.
• class-variance-authority Component variants.
• tw-animate-css The enter and exit animations.
• next-themes Theme handling.
• Base UI The unstyled behaviour under some of ReUI's components.
• date-fns and React DayPicker Dates and the calendar inside ReUI's pickers and planners.
• dnd-kit Dragging and sorting in ReUI's lists, boards and grids.
• TanStack Table and Virtual ReUI's data grid, and long lists that only draw what is on screen.
• Headless Tree ReUI's tree view.
• Shiki Syntax colouring in ReUI's code block.
• react-phone-number-input ReUI's phone field.
• mini-svg-data-uri Inlining SVG into CSS without base64.

Where it lives

• Cloudflare Pages Where the site is served from.
• Cloudflare Workers Renders every profile page.
• Cloudflare D1 The accounts and the profiles.
• Cloudflare KV Uploaded files, rate limits, Discord status.
• Cloudflare Turnstile The signup challenge.
• Resend Sends the verification code.
• Google Fonts All 1,825 fonts a profile can use.
• Wrangler Deploys it.

preinfection.lol

The card, the dock, the click-anywhere cover, the badges with no background behind them and the scrollbar all come from preinfection.lol, which is where this started.