Visual Effects Overview

In addition to the interactive components (music ball, confetti, glow), the theme includes the following visual enhancements.

Dark Mode Beam Border

In dark mode, code blocks and prev/next navigation display a purple → cyan brand color beam border effect on hover, inspired by border-beam.

Features

• Trigger: Fades in on hover, smoothly fades out on leave
• Beam color: Purple #bd34fe → Cyan #41d1ff (brand color gradient)
• Rotation speed: 3s linear loop
• Hue shift: 12s easing loop hue-rotate, beam color subtly changes over time

Dual-Layer Architecture

Two visual layers implemented using CSS pseudo-elements:

Layer	Implementation	Effect
Inner glow	::before + 9 radial-gradient brand color spots + box-shadow: inset	Soft edge glow inside the element
Stroke + bloom	::after + conic-gradient brand color beam + blur(4px)	Visible colored beam line + soft outer glow

Technical Implementation

• @property --beam-angle registers an animatable CSS custom angle property
• conic-gradient(from var(--beam-angle), ...) drives beam rotation
• 9 radial-gradient elements position brand color spots around the border
• mask-composite: intersect, exclude limits the effect to the border area
• mask-composite: intersect, add limits inner glow to the edge area
• Only active in dark mode (.dark selector) and on hover (:hover)

Heading Colored Underlines

h1-h4 headings each have differently colored underline decorations:

Heading	Light Mode	Dark Mode
h1	#45abff blue	Auto-darkened
h2	#a29bdb purple	Auto-darkened
h3	#8eb78b green	Auto-darkened
h4	#f3bad6 pink	Auto-darkened

Dark mode uses hsl(from ... h s calc(l * 0.5)) to automatically calculate darker variants.

Style properties:

• Width: 0.6em
• Style: solid
• Offset: -0.4em
• text-decoration-skip-ink: none

Custom Scrollbar

Theme-agnostic semi-transparent scrollbar styles, unified for both light and dark modes:

• Width: 6px
• Track: transparent
• Thumb: rgba(128, 128, 128, 0.35), rounded corners 3px
• Hover: rgba(128, 128, 128, 0.55)

Code Block Fold

Code blocks exceeding a specified line count (default 10) are automatically folded with a CSS mask fade-out effect and an expand button. When expanded, a collapse button appears at the bottom. Code blocks inside code-groups are not affected.

• Controlled via the codeBlockFold config option, enabled by default
• Uses CSS mask-image for content fade-out, preserving beam border effects
• The expanded state button bar uses position: absolute positioning, covering both the code area and line numbers area

Theme Switch Animation

Circular spread animation for light/dark mode switching using the View Transition API.

• Spreads from the toggle button position
• Switching to dark: new content (dark) spreads outward from the button
• Switching to light: old content (dark) shrinks toward the button

Implementation:

• Overrides default toggle behavior via provide('toggle-appearance', ...)
• Uses document.startViewTransition() API
• ::view-transition-old(root) and ::view-transition-new(root) control animation layers

Hero Gradient

Homepage title uses a purple-blue gradient:

--vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff);

Hero image background uses a 45° two-color background:

--vp-home-hero-image-background-image: -webkit-linear-gradient(
  -45deg,
  #bd34fe 50%,
  #47caff 50%
);

In dark mode, the Hero image has a blur breathing animation.