{"id":50999626,"url":"https://github.com/investblog/trigons-lite","last_synced_at":"2026-06-20T13:03:34.809Z","repository":{"id":348591636,"uuid":"1198858468","full_name":"investblog/trigons-lite","owner":"investblog","description":"Lightweight animated triangulated backgrounds for the web. Zero dependencies, ~2KB gzip. Inspired by Trigons by DeeThemes.","archived":false,"fork":false,"pushed_at":"2026-04-02T00:06:53.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-02T07:58:44.804Z","etag":null,"topics":["animation","background","canvas","css-custom-properties","generative-art","javascript","lightweight","low-poly","triangles","web-design"],"latest_commit_sha":null,"homepage":"https://301.st","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/investblog.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-01T20:35:38.000Z","updated_at":"2026-04-02T00:06:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/investblog/trigons-lite","commit_stats":null,"previous_names":["investblog/trigons-lite"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/investblog/trigons-lite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/investblog%2Ftrigons-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/investblog%2Ftrigons-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/investblog%2Ftrigons-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/investblog%2Ftrigons-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/investblog","download_url":"https://codeload.github.com/investblog/trigons-lite/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/investblog%2Ftrigons-lite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34570539,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","background","canvas","css-custom-properties","generative-art","javascript","lightweight","low-poly","triangles","web-design"],"created_at":"2026-06-20T13:03:31.029Z","updated_at":"2026-06-20T13:03:34.793Z","avatar_url":"https://github.com/investblog.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TrigonsLite\n\nLightweight animated triangulated backgrounds for the web. Zero dependencies, ~2KB gzip.\n\n## Features\n\n- Canvas-based triangulated low-poly backgrounds\n- 4 entrance/exit animation effects\n- 6 stagger directions\n- Fake directional lighting via cross-product normals\n- Auto-sizing per viewport\n- Reads CSS custom properties for colors\n- Accepts hex, `rgb()`, `rgba()`\n- Responsive with debounced resize\n- No dependencies\n\n## Install\n\nDownload `trigons-lite.min.js` (3.8KB, ~2KB gzip) from [releases](https://github.com/investblog/trigons-lite/releases) and include it:\n\n```html\n\u003cscript src=\"trigons-lite.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n```html\n\u003cdiv id=\"bg\" style=\"position:fixed;inset:0;z-index:0\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"trigons-lite.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  TrigonsLite.init('#bg', {\n    colors: ['#0a0a0f', '#1a1a24', '#8e7cff'],\n    size: 'auto',\n    depth: 0.4,\n    startVisible: false\n  }).animateIn({\n    effect: 'scale',\n    direction: 'top',\n    duration: 2000\n  });\n\u003c/script\u003e\n```\n\n## API\n\n### `TrigonsLite.init(element, options)`\n\nReturns `{ render, animateIn, animateOut, canvas }`.\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `colors` | `string[]` | `['#1a1a2e','#16213e','#0f3460']` | 2-3 colors (hex or rgb) |\n| `colorVars` | `string[]` | — | CSS custom property names to read |\n| `size` | `number\\|'auto'` | `'auto'` | Triangle cell size in px. `'auto'` = viewport / 7 |\n| `chaos` | `number` | `0.6` | Point jitter amount (0.01 - 1) |\n| `depth` | `number` | `0.35` | Fake lighting intensity (0 - 0.8) |\n| `startVisible` | `boolean` | `true` | Show triangles immediately before animation |\n\n### `.animateIn(options)` / `.animateOut(options)`\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `effect` | `string` | `'scale'` | `'fade'` `'scale'` `'spin'` `'fly'` |\n| `direction` | `string` | `'top'` | `'top'` `'bottom'` `'left'` `'right'` `'center'` `'random'` |\n| `duration` | `number` | `1500` | Animation duration in ms |\n| `stagger` | `number` | `0.6` | Stagger spread (0 - 0.9) |\n| `easing` | `string` | `'ease-out'` | `'linear'` `'ease-in'` `'ease-out'` `'ease-in-out'` |\n| `onComplete` | `function` | — | Callback when animation finishes |\n\n### `.render()`\n\nRegenerate and redraw (new random pattern).\n\n## Effects\n\n**fade** - Simple opacity transition\n\n**scale** - Scale from zero with slight rotation per triangle\n\n**spin** - Scale + aggressive rotation (low-poly explosion)\n\n**fly** - Triangles fly in from the specified direction\n\n## Using CSS Custom Properties\n\nRead colors directly from your site's design tokens:\n\n```javascript\nTrigonsLite.init('#bg', {\n  colorVars: ['--color-bg', '--color-surface', '--color-accent']\n});\n```\n\nThe element's computed styles are checked first, then `:root`.\n\n## Dark / Light Theme Switching\n\n```javascript\nvar tg = TrigonsLite.init('#bg', {\n  colors: darkColors,\n  startVisible: false\n});\ntg.animateIn({ effect: 'scale', direction: 'top' });\n\n// On theme change:\ntg.animateOut({\n  effect: 'fade',\n  duration: 800,\n  onComplete: function() {\n    // Re-init with new colors\n    tg = TrigonsLite.init('#bg', {\n      colors: lightColors,\n      startVisible: false\n    });\n    tg.animateIn({ effect: 'fade', duration: 800 });\n  }\n});\n```\n\n## Reduced Motion\n\nRespect user preferences:\n\n```javascript\nif (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n  tg.animateIn({ effect: 'scale', direction: 'top' });\n}\n```\n\n## Size Guide\n\n| Viewport | `'auto'` size | Triangles |\n|----------|---------------|-----------|\n| 375px (mobile) | ~54px | ~50 |\n| 768px (tablet) | ~110px | ~100 |\n| 1920px (desktop) | ~274px | ~100 |\n| 2560px (4K) | ~366px | ~100 |\n\nConsistent visual density across all screen sizes.\n\n## Performance\n\n| | Size |\n|---|---|\n| Source | 7.8 KB |\n| Minified | 3.8 KB |\n| **Gzip** | **~2 KB** |\n\n- Canvas rendering (no SVG DOM overhead)\n- Grid triangulation (no Delaunay algorithm)\n- `requestAnimationFrame` for animations\n- Debounced resize handler\n\n## Browser Support\n\nAll modern browsers. Canvas 2D API required.\n\n## Credits\n\nInspired by **Trigons** by **DeeThemes** — a feature-rich D3.js/SVG triangulation plugin with 15+ animation effects, gradient color modes, responsive SVG, and PNG export. If you need the full power (Delaunay triangulation, HCL/Lab color spaces, multiple color build modes, SVG output, and the complete animation library), look for the original on Envato/CodeCanyon.\n\nTrigonsLite is a ground-up rewrite focused on minimal footprint: Canvas instead of SVG, grid triangulation instead of Delaunay, fake normals instead of D3 color math. Different tool, same visual DNA.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finvestblog%2Ftrigons-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finvestblog%2Ftrigons-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finvestblog%2Ftrigons-lite/lists"}