{"id":51673138,"url":"https://github.com/bittricky/hourglass","last_synced_at":"2026-07-15T02:34:54.925Z","repository":{"id":359888842,"uuid":"1239259397","full_name":"bittricky/hourglass","owner":"bittricky","description":"An hourglass animation ⏳","archived":false,"fork":false,"pushed_at":"2026-05-24T00:14:52.000Z","size":107,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-15T02:34:50.529Z","etag":null,"topics":["css","html","javascript","liquid","musing","pixi-js","postcss","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bittricky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-14T23:22:54.000Z","updated_at":"2026-05-24T00:14:55.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bittricky/hourglass","commit_stats":null,"previous_names":["bittricky/hourglass"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bittricky/hourglass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fhourglass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fhourglass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fhourglass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fhourglass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bittricky","download_url":"https://codeload.github.com/bittricky/hourglass/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bittricky%2Fhourglass/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35488230,"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-07-15T02:00:06.706Z","response_time":131,"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":["css","html","javascript","liquid","musing","pixi-js","postcss","vite"],"created_at":"2026-07-15T02:34:54.772Z","updated_at":"2026-07-15T02:34:54.905Z","avatar_url":"https://github.com/bittricky.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Hourglass\n\n\u003e *Golden dunes stretch wide*\n\u003e\n\u003e *Shadows braid through dusk's thin light*\n\u003e\n\u003e *Stars forget the dark*\n\nA hourglass animation rendered in [Pixi.js](https://pixijs.com/). Built with [LiquidJS](https://liquidjs.com/) templating and a Vite-powered dev pipeline.\n\n## Overview\n\nThe hourglass is drawn entirely on a Pixi.js canvas, with a glass container, wooden caps, and pouring sand. The canvas has a transparent background so the configurable CSS backdrop shows through. The Liquid template build system generates the static page and injects settings as CSS custom properties.\n\n## Tech Stack\n\n- **LiquidJS** — template rendering\n- **Pixi.js** — 2D canvas rendering for the hourglass vessel, sand, and falling stream\n- **Vite** — dev server with live reload and asset bundling\n- **PostCSS** — CSS processing with `postcss-preset-env` and `autoprefixer`\n- **Node.js** — build tooling\n\n## Getting Started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) (v18+)\n- pnpm (or npm)\n\n### Installation\n\n```bash\npnpm install\n```\n\n### Build\n\nGenerate the static site to `dist/`:\n\n```bash\npnpm run build\n```\n\n### Development\n\nStart the dev server with auto-rebuild and live reload:\n\n```bash\npnpm run dev\n```\n\nThen open [http://localhost:3000](http://localhost:3000).\n\n## Project Structure\n\n```\n.\n├── dist/                          # Build output (ignored in git)\n├── sections/\n│   └── hourglass.liquid           # Section template: container + Pixi.js script tag\n├── scripts/\n│   ├── build.js                   # LiquidJS renderer + asset copier\n│   ├── sand.js                    # Pixi.js hourglass rendering module\n│   └── data/\n│       └── sections/\n│           └── hourglass.json     # Local default settings\n├── style.css                      # Source CSS: background, font, vessel canvas styling\n├── templates/\n│   └── desert.liquid              # Page wrapper template\n├── postcss.config.cjs             # PostCSS configuration\n└── package.json\n```\n\n## Customization\n\nSection settings are defined in `scripts/data/sections/hourglass.json` and injected as CSS custom properties at build time:\n\n| Setting | Description | Default |\n|---|---|---|\n| `bg_color` | Background color | `#f5f3ef` |\n\nThe `sections/hourglass.liquid` file also contains a `{% schema %}` block.\n\n## How It Works\n\n- **Dunes-of-Sand**: The hourglass shape is defined by cubic Bézier curves sampled into a lookup table (LUT) that gives the glass interior half-width at every y pixel.\n- **Glass layers**: Pixi.js draws a translucent glass body fill, edge shadow, specular highlights, and wooden caps on top and bottom.\n- **Sand mask**: A `PIXI.Graphics` mask clips all sand rendering to the glass interior, so sand never spills outside the vessel.\n- **Sand fill**: Each frame, the upper and lower sand bodies are drawn as polygons that conform to the LUT boundary. Highlights and depth shadows give the dunes dimension.\n- **Falling stream**: A tapered polygon between the waist and lower dune surface represents the grain cascade, with a centre thread highlight.\n- **Animation**: A Pixi.js ticker advances time `t` from `0 → 1` over 12 seconds. The upper sand surface drops and the lower dune rises accordingly.\n- **Background**: The canvas uses `backgroundAlpha: 0` so the CSS `var(--bg)` color shows through, making the backdrop configurable via Liquid settings.\n\n## Scripts\n\n| Script | Description |\n|---|---|\n| `pnpm run build` | Build HTML, copy assets, and bundle with Vite to `dist/` |\n| `pnpm run build:html` | Build HTML only |\n| `pnpm run dev` | Build HTML and start Vite dev server with live reload |\n| `pnpm run preview` | Preview the production build locally |\n| `pnpm run clean` | Remove `dist/` |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbittricky%2Fhourglass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbittricky%2Fhourglass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbittricky%2Fhourglass/lists"}