Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

Use this file to discover all available pages before exploring further.

Six custom animation classes are defined via Tailwind’s keyframes extension in tailwind.config.js and compiled into main.css. Every animation is pure CSS — no JavaScript timers or requestAnimationFrame loops. This means they run on the browser’s compositor thread, keeping the main thread free and the page fully interactive even while animations are running.

​
Animation Classes

​
animate-chromatic

Keyframe: chromatic-shift Property animated: text-shadow (horizontal offsets in magenta and cyan) Duration / timing: 3 s, ease (default), alternate infinite Applies an alternating chromatic aberration effect to text by offsetting magenta and cyan text-shadows in opposite horizontal directions. The offsets shift between frames, producing a subtle glitchy split that mimics the misaligned RGB guns of a degraded CRT monitor. Used on: Home hero heading, SYS_ADMIN navigation label. 
<h1 className="font-pixel text-7xl text-y2k-cyan animate-chromatic">
  WELCOME_TO_MY_SITE.EXE
</h1>

​
animate-blink

Keyframe: blink Property animated: opacity (step toggle: 1 → 0 → 1) Duration / timing: 1 s, step-end, infinite A hard step-function blink — opacity jumps instantly between 1 and 0 with no easing, exactly as a cursor or LED indicator would flash on real hardware. Using step-end (rather than linear) means the element is visible for the first half of each cycle and dark for the second half. Used on: “Status: ONLINE” indicator dot, blinking cursor characters in terminal panels. 
<span className="inline-block w-2 h-2 rounded-full bg-y2k-lime animate-blink" />

​
animate-ticker

Keyframe: scroll-left Property animated: transform: translate() (from translate(100%) to translate(-100%)) Duration / timing: 20 s, linear, infinite Translates an element from fully off-screen right (translate(100%)) to fully off-screen left (translate(-100%)), creating a continuous horizontal marquee. The 20 s linear duration produces a smooth, steady scroll speed regardless of the content length. Used on: The homepage news ticker bar at the bottom of the hero section. 
<div className="overflow-hidden whitespace-nowrap">
  <span className="inline-block animate-ticker font-pixel text-y2k-cyan">
    ★ NOW HIRING ★ OPEN TO WORK ★ FULL STACK DEV ★ REACT / NODE / TS ★
  </span>
</div>

​
animate-bg-drift

Keyframe: bg-drift Property animated: background-position (from 0 0 to 100px 100px) Duration / timing: 60 s, linear, infinite Slowly drifts a repeating background image or pattern diagonally down and to the right. The 60 s duration makes the movement imperceptible moment-to-moment but noticeable over time — a living, breathing texture rather than a static wallpaper. Used on: Panel backgrounds with the bg-grid-pattern utility (the SVG dot/line grid overlay on content sections). 
<div className="bg-grid-pattern animate-bg-drift">
  {/* panel content */}
</div>

​
animate-bounce

Keyframe: bounce Property animated: transform: translateY (up–down with easing) Duration / timing: 1 s, custom cubic-bezier per half-cycle, infinite The standard Tailwind bounce — the element eases up with cubic-bezier(0.8, 0, 1, 1) (fast start, slow end at apex) and eases down with cubic-bezier(0, 0, 0.2, 1) (slow start, fast impact). The combination gives a convincing physical bounce without any spring physics library. Used on: The avatar / profile icon in the about_me panel. 
<img
  src="/avatar.png"
  className="w-24 h-24 animate-bounce"
  alt="avatar"
/>

​
animate-pulse

Keyframe: pulse Property animated: opacity (dips to 0.5 at 50%) Duration / timing: 2 s, cubic-bezier(0.4, 0, 0.6, 1), infinite A gentle breathing pulse — opacity eases down to 50% at the midpoint and back to 100%, using a symmetrical cubic-bezier for a smooth sine-like rhythm. Softer and slower than animate-blink; suitable for loading states and elements that need to draw the eye without being distracting. Used on: Loading skeletons, emphasis overlays, and subtle attention-drawing indicators. 
<div className="bg-y2k-panel/50 animate-pulse rounded h-4 w-32" />

​
Keyframe Definitions

Below is the raw CSS for @keyframes chromatic-shift — the most visually distinctive animation in the system. The offsets are deliberately asymmetric to avoid a mechanical back-and-forth; each frame feels slightly different, producing an organic glitch quality. 
@keyframes chromatic-shift {
  0% {
    text-shadow:
       2px 0 0 #FF00E5,   /* magenta offset right */
      -2px 0 0 #00E5FF;   /* cyan offset left */
  }
  33% {
    text-shadow:
      -2px 0 0 #FF00E5,   /* magenta offset left */
       1px 0 0 #00E5FF;   /* cyan offset right (smaller) */
  }
  66% {
    text-shadow:
       1px 0 0 #FF00E5,   /* magenta close right */
      -1px 0 0 #00E5FF;   /* cyan close left */
  }
  100% {
    text-shadow:
       3px 0 0 #FF00E5,   /* magenta wide right */
      -2px 0 0 #00E5FF;   /* cyan offset left */
  }
}

.animate-chromatic {
  animation: chromatic-shift 3s infinite alternate;
}
Because the animation uses alternate, Tailwind plays it forward (0% → 100%) then reverses (100% → 0%) on each cycle, giving eight distinct shadow states per full loop.
All six animations are CSS-only — no JavaScript intervals, timeouts, or requestAnimationFrame. CSS animations that animate opacity, text-shadow, and transform are handled entirely by the browser’s compositor thread, meaning they continue to run smoothly even when the main thread is busy parsing JavaScript or re-rendering the React tree.
Accessibility — prefers-reduced-motion: The site currently does not include a prefers-reduced-motion media query. Users who have enabled “reduce motion” in their OS accessibility settings will still see all animations. Contributors can add motion-safe overrides in main.css (or the Tailwind config) to respect this preference:
@media (prefers-reduced-motion: reduce) {
  .animate-chromatic,
  .animate-ticker,
  .animate-bg-drift,
  .animate-bounce {
    animation: none;
  }

  .animate-blink,
  .animate-pulse {
    animation-duration: 4s; /* slow down rather than remove entirely */
  }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us