Sign in to edit or create your page.
← scoob.me
Pick a section to get started
profile.json Valid JSON

Profile Fields

FieldTypeDescription
displayNamestringYour display name shown on the profile
avatarstringURL or path to your avatar image
biostringShort bio text below your name (use \n for line breaks)
locationstringLocation text shown below bio or above links
songobject | falseBackground music player (see Music section)
linksarrayArray of link buttons (see Links section)
socialsarrayArray of social icon buttons

Theme

FieldTypeDescription
accentColorhexPrimary accent color used for particles, buttons, glow effects
bgColorhexPage background color
bgImagestringURL to a background image (or empty string for none)
bgOpacitynumberOpacity of the background image (0 to 1)
bgImageAnimstring Background image animation:
bounceinfinitydriftzoom spinkenburnsparallax-scrollpulse shake
bgImageAnimSpeednumberSpeed multiplier for BG animation (default 1). E.g. 2 = double speed, 0.5 = half speed.
fontstringCustom Google Font name (e.g. "Space Grotesk")
nameEffectstringNameplate text effect (see Nameplate section)
avatarShapestringAvatar shape: rounded, hexagon, or squircle. Default circle.
avatarBorderobjectCustom avatar border (see Avatar Border section)
linkStylestringLink button style (see Link Styles section)
bioWrapbooleanAllow bio to wrap lines. Default true.
dropShadownumberDrop shadow blur in px on the profile card (0 = off)
textStrokeobject | falseOutline stroke on display name (see Text Stroke section)
textShadowboolean | objectShadow behind all text for readability on light backgrounds (see Text Shadow section)
trailDurationnumberCursor trail lifetime in seconds (e.g. 1.5)
cardBackgroundobject | falseGlassmorphism card around profile (see Card section)

Particles / Background Effects

FieldTypeDescription
particlesstring Background effect type:
starssnowfirefliesfire matrixgradientaurorabubbles rainconfettirave
particleCountnumberNumber of particles (1–500). Each effect has its own default.
particleSpeednumberSpeed multiplier (default 1). E.g. 0.5 = half speed, 2 = double.
particleSizenumberSize multiplier (default 1).
particleColorsarrayArray of hex colors for particles. E.g. ["#ff0000", "#00ff00"]
"particles": "aurora", "particleCount": 100, "particleSpeed": 0.8, "particleSize": 1.5, "particleColors": ["#ff6b6b", "#4ecdc4", "#45b7d1"]

Cursor Trail

FieldTypeDescription
cursorTrailstring | false Cursor trail effect type, or false to disable:
dotsglowlightningcomet
trailDurationnumberHow long each trail element stays visible in seconds (e.g. 1.5)
The trail uses your accentColor automatically. Set to false to disable completely.

Drop Shadow

FieldTypeDescription
dropShadownumberDrop shadow blur radius in pixels on the profile card. 0 = off. Uses your accent color.
"dropShadow": 15

Text Stroke

FieldTypeDescription
textStroke.colorhexStroke outline color
textStroke.widthnumberStroke width in pixels (0.5–5)
"textStroke": { "color": "#ffffff", "width": 1.5 }

Text Shadow

FieldTypeDescription
theme.textShadowboolean | objectAdds shadow behind all text for readability on light backgrounds. Set true for defaults or pass an object.
theme.textShadow.colorhexShadow color (default: #000000)
theme.textShadow.blurnumberShadow blur radius in pixels (0–30, default: 4)
"theme": { "textShadow": true }
Use this when your background image is light or busy. Set to true for a black shadow, or customise colour and blur. Applies to all text including display name, bio, username, views, location, links, and widgets.

Avatar Hover Effect

FieldTypeDescription
avatarHoverstring Hover effect on the avatar:
tiltglowpulsespinorbitbounceglitchmorphrainbow
tilt — 3D perspective on mousemove  |  glow — pulsing accent glow  |  pulse — breathing scale  |  spin — rotation on hover  |  orbit — spinning ring around avatar  |  bounce — elastic bounce  |  glitch — hue-rotate distortion  |  morph — blob shape on hover  |  rainbow — animated conic-gradient ring

Nameplate Effect

FieldTypeDescription
nameEffectstring Text effect on your display name:
gradientglowtypewriterglitchwaveshimmer
nameGradientColorsarrayArray of 2+ hex colors (only used with gradient effect)
"nameEffect": "gradient", "nameGradientColors": ["#ff6b6b", "#4ecdc4", "#45b7d1"]
gradient — animated color sweep  |  glow — accent-colored text shadow  |  typewriter — typing animation  |  glitch — distortion effect  |  wave — letters bounce  |  shimmer — metallic shine sweep

Avatar Shape

FieldTypeDescription
avatarShapestring Shape of the avatar image:
circle (default)roundedhexagonsquircle

Avatar Border

FieldTypeDescription
avatarBorder.colorhexBorder color
avatarBorder.widthnumberBorder width in pixels (1–10)
avatarBorder.animatedbooleanAnimated gradient spinning border
"avatarBorder": { "color": "#8b5cf6", "width": 3, "animated": true }

Link Styles

FieldTypeDescription
linkStylestring Visual style for link buttons:
defaultoutlinepillflatgradientneonglasscyberminimalslidebracketed
outline — transparent with border  |  pill — larger rounded buttons  |  flat — no border, subtle hover  |  gradient — accent gradient fill  |  neon — glowing neon border & text  |  glass — frosted glass with backdrop blur  |  cyber — angular cyberpunk clip-path  |  minimal — underline reveal on hover  |  slide — color fill slides left-to-right

Background Gradient

FieldTypeDescription
bgGradient.colorsarrayArray of 2+ hex colors for the animated gradient
bgGradient.anglenumberGradient angle in degrees (default 135)
bgGradient.speednumberAnimation speed in seconds (2–60, default 15)
"bgGradient": { "colors": ["#0f0c29", "#302b63", "#24243e"], "angle": 135, "speed": 20 }

Card Background

FieldTypeDescription
cardBackgroundobject | falseSet to true for defaults, or an object to customise:
cardBackground.colorstringCard background (hex or rgba)
cardBackground.borderstringCard border color
cardBackground.radiusstringBorder radius, e.g. "24px"
cardBackground.blurstringBackdrop blur, e.g. "20px"
cardBackground.borderEffectstringAnimated border: "chase" or "pulse"
cardBackground.borderEffectColorstringEffect color (defaults to accent)
"cardBackground": { "color": "rgba(255,255,255,0.04)", "border": "rgba(255,255,255,0.08)", "radius": "24px", "blur": "20px", "borderEffect": "chase" }

Card Effects

FieldTypeDescription
cardTiltbooleanEnable 3D tilt effect on the profile card — follows mouse with perspective transform and dynamic shadow
cardTiltFullPagebooleanExtend 3D tilt to the entire page instead of just the card area
parallaxbooleanEnable parallax depth effect — background image and particles shift with mouse movement
parallaxIntensitynumberParallax strength multiplier (0.1–3, default 1). Higher = more dramatic shift.
"cardTilt": true, "parallax": true, "parallaxIntensity": 1.5
Both effects respond to mouse position. cardTilt rotates the card up to 15° with a layered 3D depth effect. parallax shifts the background by ±15px and particles by ±8px for a subtle depth illusion.

Widgets

FieldTypeDescription
theme.widgets.layoutstringWidget layout: omit for stacked, "grid" for 2-column grid
theme.widgets.discordbooleanDiscord identity widget (status, activities, clan tag)
theme.widgets.showDiscordButtonboolean"View on Discord" button — shown by default, set false to hide
theme.widgets.githubstringGitHub commits widget — set to your GitHub username
theme.widgets.serverstringDiscord server widget — set to an invite link or code
"theme": { "widgets": { "layout": "grid", "discord": true, "github": "octocat", "server": "discord.gg/abc123" } }
Widgets appear below the card. Discord data is pulled live from presence. GitHub shows your 5 most recent commits via the public events API. Server shows your Discord server with member count and a Join button.

Music

FieldTypeDescription
song.urlstringURL to the primary audio file (also acts as the first track)
song.titlestringSong title shown in the player
song.artiststringArtist name
song.volumenumberDefault volume (0 to 1)
song.visualiserbooleanShow audio visualiser on the profile card behind the view count
song.playlistarrayAdditional tracks — each entry is { url, title, artist }. When present the player plays through all tracks in order. Max 50 entries.
song.randomizebooleanShuffle the playlist on every page load (only applies when playlist has more than one entry)
"song": { "url": "/assets/songs/track1.mp3", "title": "Track 1", "artist": "Artist Name", "volume": 0.5, "playlist": [ { "url": "/assets/songs/track2.mp3", "title": "Track 2", "artist": "Artist" }, { "url": "/assets/songs/track3.mp3", "title": "Track 3", "artist": "Artist" } ], "randomize": true }
With a single track the player loops it. With multiple tracks the player advances in order (or randomly if randomize is true) and shows prev/next skip buttons. Set "song": false to disable the player entirely.

Links

FieldTypeDescription
links[].labelstringButton text
links[].urlstringLink URL
links[].iconstringFont Awesome class, e.g. "fab fa-discord"
links[].colorhexCustom button glow color (optional)
"links": [ { "label": "Discord", "url": "https://discord.gg/...", "icon": "fab fa-discord", "color": "#5865F2" }, { "label": "GitHub", "url": "https://github.com/...", "icon": "fab fa-github" } ]

Socials

FieldTypeDescription
socials[].urlstringSocial link URL
socials[].iconstringFont Awesome icon class
Brand colors are auto-detected from the icon. Supported: Twitter/X, GitHub, Instagram, Discord, Spotify, YouTube, Twitch, TikTok, Reddit, LinkedIn, Steam, Snapchat, SoundCloud, Pinterest, Telegram.

Full Example

{ "displayName": "My Name", "avatar": "/assets/avatars/me.webp", "bio": "Hello world", "location": "Earth", "song": { "url": "/assets/songs/tune.mp3", "title": "My Tune", "artist": "Me", "volume": 0.5 }, "theme": { "accentColor": "#8b5cf6", "bgColor": "#0c0014", "bgImage": "", "bgOpacity": 0.15, "bgImageAnim": "bounce", "particles": "aurora", "particleSpeed": 0.8, "particleColors": ["#ff6b6b", "#4ecdc4"], "cursorTrail": "comet", "avatarHover": "tilt", "font": "Space Grotesk", "nameEffect": "gradient", "nameGradientColors": ["#ff6b6b", "#4ecdc4"], "avatarShape": "squircle", "avatarBorder": { "color": "#8b5cf6", "width": 3, "animated": true }, "linkStyle": "pill", "cardTilt": true, "parallax": true, "parallaxIntensity": 1.5, "bioWrap": true, "dropShadow": 10, "textStroke": { "color": "#ffffff", "width": 1 }, "trailDuration": 1.5, "cardBackground": { "color": "rgba(255,255,255,0.04)", "border": "rgba(255,255,255,0.08)", "radius": "24px", "blur": "20px" } }, "links": [ { "label": "Discord", "url": "https://discord.gg/...", "icon": "fab fa-discord", "color": "#5865F2" } ], "socials": [ { "url": "https://github.com/...", "icon": "fab fa-github" } ] }
Profile
Discord links tend to expire — re-upload via the CDN uploader instead.
Imgur is a blacklisted domain (region-locked). Use the CDN uploader instead.
Discord links tend to expire — re-upload via the CDN uploader instead.
Imgur is a blacklisted domain (region-locked). Use the CDN uploader instead.
Discord links tend to expire — re-upload via the CDN uploader instead.
Imgur is a blacklisted domain (region-locked). Use the CDN uploader instead.
Custom Border
3
Rotating gradient border
Type your bio, then select any word or phrase to add gradients & effects
Style: “”
Share Embed ?Customise how your link looks when shared on Discord, Twitter, etc. The "scoob.me" author and your display name stay the same — you can override the description, image and colour.
Connect Discord
Link your scoob.me subdomain to your Discord profile using Discord's Connect your Domain feature. Paste the dh=... value from Discord's settings.
How to set this up
  1. Open Discord Settings → Connections
  2. Click Add → Domain
  3. Enter your subdomain: your-name.scoob.me
  4. Discord will show a dh=... value — copy it
  5. Paste it above and click Save
  6. Go back to Discord and click Verify
Theme
Discord links tend to expire — re-upload via the CDN uploader instead.
Imgur is a blacklisted domain (region-locked). Use the CDN uploader instead.
0.05
Background Gradient
Card
Card Background
24
20
100
(tilt entire page instead of card)
(tilts away from cursor)
1
1
(entire page pulses)
(auto-calibrates to any song)
Widgets
Discord
Shows your avatar, Discord status, clan tag, custom status, and activities. Data is pulled live from Discord.
GitHub Commits
Discord Server
Paste a Discord invite link or code. Shows server icon, name, member count, and a Join button.
Music
0.5
1
Links
Socials
Effects & Particles
Particles
0
1
1
Cursor Trail
1
Custom Cursor
Cursor Sprite
A little cat sprite that chases your cursor around the page.
0
Text Stroke
1
Text Shadow ?Adds a shadow behind all text on the profile. Helps readability on light or busy backgrounds.
4
Splash Screen
Hide Text
Show only the ASCII art / icon on the splash with no text underneath.
Skip Splash
Only available when you have no music or video background. Hides the splash entirely.

Config Presets

0 / 10 slots used

Save and load profile configurations. Presets are synced to the cloud so they persist across devices.

Advanced Mode

Replace your entire profile page with custom HTML and CSS hosted on GitHub. Fields save automatically as you type, and your page updates whenever you push new commits to GitHub. Your Simple mode settings are preserved.

Enable Advanced Mode
Desktop Preview (1920 × 1080)
claim your page
.scoob.me
← scoob.me