https://github.com/qc20/credit-link
This project creates an interactive particle animation. When users hover over or touch the text (on mobile devices), the particles react and move organically. Clicking or tapping the text triggers an explosion effect before redirecting to a specified URL.
https://github.com/qc20/credit-link
author-link cite credit-link css html hyperlink interaction-design interactive javascript link noise particles physics scatter
Last synced: about 1 month ago
JSON representation
This project creates an interactive particle animation. When users hover over or touch the text (on mobile devices), the particles react and move organically. Clicking or tapping the text triggers an explosion effect before redirecting to a specified URL.
- Host: GitHub
- URL: https://github.com/qc20/credit-link
- Owner: QC20
- License: mit
- Created: 2024-07-15T11:20:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T13:02:34.000Z (almost 2 years ago)
- Last Synced: 2024-12-31T21:28:26.561Z (over 1 year ago)
- Topics: author-link, cite, credit-link, css, html, hyperlink, interaction-design, interactive, javascript, link, noise, particles, physics, scatter
- Language: JavaScript
- Homepage: https://qc20.github.io/credit-link/
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# credit-link
Interactive particle animation that forms your name as a digital signature. Built as a Web Component so it drops into any project with a single line.
---
## Usage in other projects
Point to the hosted file on your Vercel deployment. No install, no build step.
```html
```
That is all. The animation renders as a fixed overlay in the bottom-right corner. Updates pushed to this repo propagate to every project automatically.
---
## Per-project overrides (optional)
All defaults live in `DEFAULTS` inside `credit-link.js`. Override them per-project via HTML attributes:
```html
```
| Attribute | Default | Description |
|-------------|--------------------------------------|--------------------------------------|
| `text` | `Jonas Kjeldmand Jensen` | Text the particles form |
| `href` | `https://jonaskjeldmand.vercel.app/`| Where clicking the text navigates |
| `easter-egg` | `jokje@dtu.dk` | Text shown after hovering 3 seconds |
---
## Framework usage
Since it is a native Web Component, it works without any wrappers.
**React / Next.js**
```jsx
// No import needed beyond the script tag in your _document.js or layout
export default function Layout({ children }) {
return (
<>
{children}
>
);
}
```
**Vue**
```vue
```
**Svelte**
```svelte
```
**Astro**
```astro
```
Add `is:inline` to the script tag in Astro to prevent it being processed by the bundler.
---
## Updating defaults globally
Open `credit-link.js` and edit the `DEFAULTS` object at the top:
```js
const DEFAULTS = {
text: 'Jonas Kjeldmand Jensen',
href: 'https://jonaskjeldmand.vercel.app/',
easterEgg: 'jokje@dtu.dk',
};
```
Push the change and all projects that reference the hosted URL reflect it on next page load.
---
## Behaviour config
All timing, physics, and visual parameters are in the `CONFIG` object directly below `DEFAULTS` in `credit-link.js`.
| Key | Default | Effect |
|--------------------|---------|---------------------------------------------|
| `mouseRadius` | 55 | Interaction radius in CSS pixels |
| `breathAmplitude` | 0.8 | Idle oscillation size in pixels |
| `shimmerSpeed` | 0.0004 | Rate of colour shimmer |
| `easterEggDelay` | 3000 | ms of hovering before easter egg triggers |
| `easterEggDuration`| 4000 | ms the easter egg text stays visible |
| `longPressDuration`| 600 | ms touch hold to trigger explosion (mobile) |
| `gravity` | 0.12 | Downward pull on exploding particles |
| `explosionDuration`| 1500 | Total explosion animation in ms |
---
## Deploying
The file needs to be publicly accessible. Since you are already on Vercel, place `credit-link.js` in your `/public` folder:
```
your-repo/
public/
credit-link.js ← accessible at https://your-domain.com/credit-link.js
credit-link.js ← source (or the same file)
```
Other projects then reference `https://your-domain.com/credit-link.js` and never need to change that URL again.
---
## Local development
```bash
# Any static server works, e.g.:
npx serve .
# Then open http://localhost:3000
```
---
## Browser support
All modern browsers supporting Custom Elements v1 and ES2020. No polyfills needed for Chrome, Firefox, Safari, and Edge.