{"id":18936941,"url":"https://github.com/qc20/credit-link","last_synced_at":"2026-05-05T02:38:00.608Z","repository":{"id":248528076,"uuid":"828908746","full_name":"QC20/credit-link","owner":"QC20","description":"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.","archived":false,"fork":false,"pushed_at":"2024-07-18T13:02:34.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-31T21:28:26.561Z","etag":null,"topics":["author-link","cite","credit-link","css","html","hyperlink","interaction-design","interactive","javascript","link","noise","particles","physics","scatter"],"latest_commit_sha":null,"homepage":"https://qc20.github.io/credit-link/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QC20.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-15T11:20:38.000Z","updated_at":"2024-07-18T13:02:37.000Z","dependencies_parsed_at":"2024-07-18T15:24:14.345Z","dependency_job_id":null,"html_url":"https://github.com/QC20/credit-link","commit_stats":null,"previous_names":["qc20/credit-link"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2Fcredit-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2Fcredit-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2Fcredit-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2Fcredit-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QC20","download_url":"https://codeload.github.com/QC20/credit-link/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239937697,"owners_count":19721483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["author-link","cite","credit-link","css","html","hyperlink","interaction-design","interactive","javascript","link","noise","particles","physics","scatter"],"created_at":"2024-11-08T12:09:22.514Z","updated_at":"2026-05-05T02:38:00.599Z","avatar_url":"https://github.com/QC20.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# credit-link\n\nInteractive 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.\n\n---\n\n## Usage in other projects\n\nPoint to the hosted file on your Vercel deployment. No install, no build step.\n\n```html\n\u003c!-- 1. Load the component (once, in \u003chead\u003e or before \u003c/body\u003e) --\u003e\n\u003cscript type=\"module\" src=\"https://jonaskjeldmand.vercel.app/credit-link.js\"\u003e\u003c/script\u003e\n\n\u003c!-- 2. Drop the tag anywhere in your HTML --\u003e\n\u003ccredit-link\u003e\u003c/credit-link\u003e\n```\n\nThat is all. The animation renders as a fixed overlay in the bottom-right corner. Updates pushed to this repo propagate to every project automatically.\n\n---\n\n## Per-project overrides (optional)\n\nAll defaults live in `DEFAULTS` inside `credit-link.js`. Override them per-project via HTML attributes:\n\n```html\n\u003ccredit-link\n  text=\"Your Name Here\"\n  href=\"https://your-portfolio.com\"\n  easter-egg=\"you@email.com\"\n\u003e\u003c/credit-link\u003e\n```\n\n| Attribute    | Default                              | Description                          |\n|-------------|--------------------------------------|--------------------------------------|\n| `text`       | `Jonas Kjeldmand Jensen`            | Text the particles form              |\n| `href`       | `https://jonaskjeldmand.vercel.app/`| Where clicking the text navigates    |\n| `easter-egg` | `jokje@dtu.dk`                      | Text shown after hovering 3 seconds  |\n\n---\n\n## Framework usage\n\nSince it is a native Web Component, it works without any wrappers.\n\n**React / Next.js**\n```jsx\n// No import needed beyond the script tag in your _document.js or layout\nexport default function Layout({ children }) {\n  return (\n    \u003c\u003e\n      {children}\n      \u003ccredit-link /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n**Vue**\n```vue\n\u003ctemplate\u003e\n  \u003ccredit-link /\u003e\n\u003c/template\u003e\n```\n\n**Svelte**\n```svelte\n\u003ccredit-link /\u003e\n```\n\n**Astro**\n```astro\n\u003ccredit-link /\u003e\n```\n\nAdd `is:inline` to the script tag in Astro to prevent it being processed by the bundler.\n\n---\n\n## Updating defaults globally\n\nOpen `credit-link.js` and edit the `DEFAULTS` object at the top:\n\n```js\nconst DEFAULTS = {\n  text:      'Jonas Kjeldmand Jensen',\n  href:      'https://jonaskjeldmand.vercel.app/',\n  easterEgg: 'jokje@dtu.dk',\n};\n```\n\nPush the change and all projects that reference the hosted URL reflect it on next page load.\n\n---\n\n## Behaviour config\n\nAll timing, physics, and visual parameters are in the `CONFIG` object directly below `DEFAULTS` in `credit-link.js`.\n\n| Key                | Default | Effect                                      |\n|--------------------|---------|---------------------------------------------|\n| `mouseRadius`      | 55      | Interaction radius in CSS pixels            |\n| `breathAmplitude`  | 0.8     | Idle oscillation size in pixels             |\n| `shimmerSpeed`     | 0.0004  | Rate of colour shimmer                      |\n| `easterEggDelay`   | 3000    | ms of hovering before easter egg triggers   |\n| `easterEggDuration`| 4000    | ms the easter egg text stays visible        |\n| `longPressDuration`| 600     | ms touch hold to trigger explosion (mobile) |\n| `gravity`          | 0.12    | Downward pull on exploding particles        |\n| `explosionDuration`| 1500    | Total explosion animation in ms             |\n\n---\n\n## Deploying\n\nThe file needs to be publicly accessible. Since you are already on Vercel, place `credit-link.js` in your `/public` folder:\n\n```\nyour-repo/\n  public/\n    credit-link.js   ← accessible at https://your-domain.com/credit-link.js\n  credit-link.js     ← source (or the same file)\n```\n\nOther projects then reference `https://your-domain.com/credit-link.js` and never need to change that URL again.\n\n---\n\n## Local development\n\n```bash\n# Any static server works, e.g.:\nnpx serve .\n# Then open http://localhost:3000\n```\n\n---\n\n## Browser support\n\nAll modern browsers supporting Custom Elements v1 and ES2020. No polyfills needed for Chrome, Firefox, Safari, and Edge.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fcredit-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqc20%2Fcredit-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fcredit-link/lists"}