https://github.com/finleygn/wwwgraphics
Web Graphics Utilities
https://github.com/finleygn/wwwgraphics
Last synced: 2 months ago
JSON representation
Web Graphics Utilities
- Host: GitHub
- URL: https://github.com/finleygn/wwwgraphics
- Owner: finleygn
- Created: 2025-01-04T23:16:38.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-13T23:18:42.000Z (3 months ago)
- Last Synced: 2025-03-14T00:27:00.736Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 30.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# wwwgraphics
A utility library for web projects with visuals that stray away from CSS.
## Installation
Currently this package is only published to [JSR](https://jsr.io/@fishley/wwwgraphics).
```bash
# Deno
deno add jsr:@fishley/wwwgraphics
# NPM
npx jsr add @fishley/wwwgraphics
# Bun
bunx jsr add @fishley/wwwgraphics
```
## Snippet
There isn't much documentation yet outside of https://jsr.io/@fishley/wwwgraphics/doc. But here is a snippet of some utils working together :)
```ts
import { renderLoop, type RenderLoopTimeData } from '@fishley/wwwgraphics/app';
import { MousePositionTracker } from '@fishley/wwwgraphics/interaction';
import { AutonomousSmoothValue } from '@fishley/wwwgraphics/animation';
const cursorTrail = document.getElementById('cursor-trail');
const initialPosition = { x: 0.5, y: 0.5 };
const cursorTrailPosition = {
x: new AutonomousSmoothValue(initialPosition.x),
y: new AutonomousSmoothValue(initialPosition.y),
}
const tracker = new MousePositionTracker(initialPosition.x, initialPosition.y, document.body);
renderLoop(
(time: RenderLoopTimeData) => {
cursorTrailPosition.x.target = tracker.x;
cursorTrailPosition.y.target = tracker.y;
// Slowly approach the mouse position
cursorTrailPosition.x.tick(time.dt);
cursorTrailPosition.y.tick(time.dt);
cursorTrail.style.transform = `translate(${cursorTrailPosition.x.value * 100}%, ${cursorTrailPosition.y.value * 100}%)`;
},
{ longestFrame: 60 }
);
```