everything else

Credits

This site is mostly other people's work, arranged. Everything it is built out of is listed here.

Components
12

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 default typeface on profiles and file pages, 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.
Libraries
27

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.
  • emoji.gg The animated emoji most of the built-in badges now use.
  • Geist Mono The monospace typeface, by Vercel.
  • Inter The typeface across the site, by Rasmus Andersson. SIL Open Font License, served from this site.
  • Coolvetica The name, the icon and the headlines, by Typodermic Fonts.
  • Game badges Illustrations by studiogstock on Magnific (formerly Freepik), free license with attribution. The badge icons in the games and on profiles.
  • Collectible gifts Free animations from LottieFiles, under the Lottie Simple License, by Abhishek dewangan, Adnen Chouibi, Afif Ridwan, Bhavesh Lohar, Celcea Tifani, chitta shanmukha, Christina Bublyk, Daniel Nahum, Dev Ashish Deval, F C, JAStudio, Jean-Jacques Soumbou, Kang Motion Studio, Mahendra Bhunwal, manju, MD Abdur Rahim, Mehmet ÇAM, Milad Pahlavanian, Milan Reed, Natalia Świerz, NicklePickle, Nik Reyb, Plain Anims, Rami Ashqar, Saad Ali Naseer, Sam Van Bussel, sayed gillani, Shakil Ali, Shresth Bhadani, SM Rony, Suhayra Sarwar, Tahir Amin, Tam Doan, TheSub, Tomer Arnon, Yerish Lee (the Magic Eye is Celcea Tifani's remix of LanaNguyen's). The backdrops and patterns are our own.
  • The night sky “Milchstraße über Hochkalter & Hintersee”, by Anil Öztas, CC BY 4.0. Behind the front page and the page headers.
  • Sonner The toasts.
  • 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.
Infrastructure
8

Where it lives

Before this
1

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.