Skip to content

Commit d346bbb

Browse files
JaydenYoonZKJaydenYoonZK
committed
Pin the cursor sparkles to the cursor on high-density displays
The sparkle canvas had no CSS size, so as a replaced element it kept its intrinsic bitmap size and grew with the device pixel ratio; on a 2x display every particle landed at twice the pointer's coordinates. The canvas now fills the viewport exactly.
1 parent a6e204e commit d346bbb

5 files changed

Lines changed: 13 additions & 7 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33
All notable changes to this project are documented here.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
55

6+
## 2.5.1 - 2026-07-13
7+
8+
### Fixed
9+
10+
- On high-density displays the cursor sparkles appeared at twice the pointer's distance from the corner instead of under the cursor. The canvas kept its intrinsic pixel size because it had no CSS size, so its element grew with the device pixel ratio; it now fills the viewport exactly.
11+
612
## 2.5.0 - 2026-07-13
713

814
### Added

‎JayButton.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* MIT License: use it freely in your own projects and websites, and keep this notice. The brand stays behind the code.
66
* https://github.com/JaydenART/JaydenART_Realistic_3D_CSS_Button
77
*/
8-
/* JaydenART Realistic 3D CSS Button v2.5.0 */
8+
/* JaydenART Realistic 3D CSS Button v2.5.1 */
99

1010
.jay-button,
1111
.jay-button-studio {

‎demo.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ body::after {
178178
/* Cursor sparkles, painted by demo.js. The canvas rides above the page
179179
but never catches the pointer; touch screens and reduced-motion
180180
readers never see it. */
181-
.dust { position: fixed; inset: 0; z-index: 2050; pointer-events: none; }
181+
.dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2050; pointer-events: none; }
182182
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .dust { display: none; } }
183183

184184
/* Navigation: sticky glass with the soft shadow and the overscroll bleed. */

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@
2323
<meta name="twitter:title" content="Realistic 3D CSS Button by JaydenART">
2424
<meta name="twitter:description" content="A button that actually presses. Pure CSS, two styles, zero dependencies.">
2525
<meta name="twitter:image" content="https://jaydenart.github.io/JaydenART_Realistic_3D_CSS_Button/assets/social-preview.png">
26-
<link rel="stylesheet" href="JayButton.css?v=2.5.0">
27-
<link rel="stylesheet" href="demo.css?v=2.5.0">
28-
<script src="demo.js?v=2.5.0" defer></script>
26+
<link rel="stylesheet" href="JayButton.css?v=2.5.1">
27+
<link rel="stylesheet" href="demo.css?v=2.5.1">
28+
<script src="demo.js?v=2.5.1" defer></script>
2929
</head>
3030
<body>
3131
<a class="skip-link" href="#main">Skip to main content</a>
@@ -93,7 +93,7 @@ <h1>A button that actually presses.</h1>
9393
<p class="privacy"><span class="privacy-lock" aria-hidden="true">&#128274;</span><span>No requests, no analytics, no storage. The buttons are pure CSS, and the one small script here only draws cursor sparkles.</span></p>
9494
</div>
9595
<div class="hero-art" aria-hidden="true">
96-
<img src="assets/hero-press.svg?v=2.5.0" alt="" width="640" height="300">
96+
<img src="assets/hero-press.svg?v=2.5.1" alt="" width="640" height="300">
9797
</div>
9898
</div>
9999
</header>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jaydenart-realistic-3d-css-button",
3-
"version": "2.5.0",
3+
"version": "2.5.1",
44
"description": "Two dependency-free CSS buttons: the original glossy JayButton Classic and the accessible layered JayButton Studio.",
55
"private": true,
66
"scripts": {

0 commit comments

Comments
 (0)