nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed cursor

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-16 17:39:57 +02:00
parent 9a3d3c89f3
commit c576794951
2 changed files with 2 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CyberFx.astro
+1 -60
View File
@@ -5,8 +5,7 @@
* Renders an aria-hidden overlay root on every page. All visuals are CSS,
* scoped to `.cybersigil .cs-fx*` in global.css, so this is an inert,
* display:none no-op under every other theme. The bundled script only wires
* the JS-driven mechanics (custom sigil cursor + fading trail, scroll-entry
* databend on images) and self-disables off-theme, on touch, or under
* the scroll-entry databend on images and self-disables off-theme or under
* prefers-reduced-motion.
*/
---
@@ -21,70 +20,12 @@
<i class="cs-fx-corner cs-fx-corner--br"></i>
</div>
<!-- Cursor lives in its own top-level, un-contained, max-z root so it floats
above every modal/library (Search + AssetManager are z-[200]). -->
<div class="cs-cursor-root" aria-hidden="true">
<div class="cs-cursor">
<span class="cs-cursor-ring"></span>
<span class="cs-cursor-core"></span>
</div>
</div>
<script>
function initCyberFx() {
const root = document.documentElement;
if (!root.classList.contains('cybersigil')) return;
const fx = document.querySelector('.cs-fx') as HTMLElement | null;
const cursorRoot = document.querySelector('.cs-cursor-root') as HTMLElement | null;
if (!fx || !cursorRoot) return;
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const finePointer = window.matchMedia('(pointer: fine)').matches;
const noHover = window.matchMedia('(hover: none)').matches;
/* ─── Custom sigil cursor + fading trail ─── */
const cursor = cursorRoot.querySelector('.cs-cursor') as HTMLElement | null;
if (cursor && finePointer && !noHover) {
root.classList.add('cs-cursor-on');
let cx = window.innerWidth / 2;
let cy = window.innerHeight / 2;
let raf = 0;
let lastTrail = 0;
const HOT = 'a,button,input,textarea,select,[role="button"],.btn,.plate,.topbar-control,.back-link,.chip';
function paint() {
raf = 0;
cursor!.style.transform = `translate3d(${cx}px, ${cy}px, 0)`;
}
window.addEventListener(
'mousemove',
(e) => {
cx = e.clientX;
cy = e.clientY;
if (!raf) raf = requestAnimationFrame(paint);
const t = e.target as Element | null;
const hot = !!(t && t.closest && t.closest(HOT));
cursor!.classList.toggle('cs-cursor--hot', hot);
if (!reduced && e.timeStamp - lastTrail > 28) {
lastTrail = e.timeStamp;
const dot = document.createElement('span');
dot.className = 'cs-trail';
dot.style.left = cx + 'px';
dot.style.top = cy + 'px';
cursorRoot!.appendChild(dot);
dot.addEventListener('animationend', () => dot.remove(), { once: true });
}
},
{ passive: true }
);
window.addEventListener('mousedown', () => cursor!.classList.add('cs-cursor--down'));
window.addEventListener('mouseup', () => cursor!.classList.remove('cs-cursor--down'));
document.addEventListener('mouseleave', () => cursor!.classList.add('cs-cursor--gone'));
document.addEventListener('mouseenter', () => cursor!.classList.remove('cs-cursor--gone'));
}
/* ─── Scroll-entry databend on images ─── */
if (!reduced && 'IntersectionObserver' in window) {