CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / feedback-overlays / lava-trail-cursor

Stable release
Back to category

Open experiment

Lava trail cursor

A focusable pointer demonstration surface with a luminous molten core and a decaying lava trail. Pointer movement emits cooling droplets, arrow keys provide an equivalent keyboard demonstration, and the effect never changes the global document cursor.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<section
  class="cmp-lava-cursor"
  tabindex="0"
  aria-label="Lava trail cursor demonstration"
  aria-describedby="cmp-lava-cursor-help"
>
  <header><span>Molten field</span><strong>Move to spill lava</strong></header>
  <span class="cmp-lava-cursor__trail" aria-hidden="true"></span>
  <i class="cmp-lava-cursor__core" aria-hidden="true"></i>
  <p id="cmp-lava-cursor-help">Use a pointer or focus the field and press arrow keys.</p>
  <span class="cmp-lava-cursor__status" aria-live="polite">Core centered</span>
</section>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • The demonstration field is focusable and supports arrow-key movement.
  • Instructions remain visible and the molten trail is decorative.
  • Reduced-motion mode keeps one stationary core and suppresses trail emission.

License: MIT License for open-source use, modification, and distribution.