{"id":24278354,"url":"https://github.com/bethropolis/svelte-film-countdown","last_synced_at":"2026-03-07T02:02:33.370Z","repository":{"id":270522315,"uuid":"910636861","full_name":"bethropolis/svelte-film-countdown","owner":"bethropolis","description":"A vintage-style film countdown component for Svelte 5.","archived":false,"fork":false,"pushed_at":"2025-12-29T23:51:12.000Z","size":381,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-02T07:11:42.724Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bethropolis.github.io/svelte-film-countdown/","language":"Svelte","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/bethropolis.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":"2024-12-31T22:29:51.000Z","updated_at":"2025-12-29T23:50:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"f769165f-9687-45c2-b726-2e54e2554b59","html_url":"https://github.com/bethropolis/svelte-film-countdown","commit_stats":null,"previous_names":["bethropolis/svelte-film-countdown"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/bethropolis/svelte-film-countdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethropolis%2Fsvelte-film-countdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethropolis%2Fsvelte-film-countdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethropolis%2Fsvelte-film-countdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethropolis%2Fsvelte-film-countdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bethropolis","download_url":"https://codeload.github.com/bethropolis/svelte-film-countdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bethropolis%2Fsvelte-film-countdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30205893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"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":[],"created_at":"2025-01-16T00:43:08.281Z","updated_at":"2026-03-07T02:02:33.332Z","avatar_url":"https://github.com/bethropolis.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-film-countdown\n[![Deploy to GitHub Pages](https://github.com/bethropolis/svelte-film-countdown/actions/workflows/pages.yaml/badge.svg)](https://github.com/bethropolis/svelte-film-countdown/actions/workflows/pages.yaml)\n\nA vintage-style film countdown component for your Svelte 5 applications, built with runes.\n\n![Example Countdown](static/image.png)\n\n## Features\n\n*   **Authentic Vintage Aesthetic:**  Provides a visually compelling retro film countdown experience reminiscent of classic cinema.\n*   **Highly Customizable:**  Tailor the countdown's behavior and appearance with props and CSS variables. Control duration, initial count, styling of circles, numbers, and visual effects.\n*   **Programmatic Control:**  Imperatively manage the countdown's state using exported functions: `start`, `pause`, `resume`, and `reset`.\n*   **Event Callbacks:**  Execute custom logic when the countdown completes (`onComplete`) or after each decrement (`onEachCount`).\n*   **Looping Functionality:**  Enable continuous countdown loops with the `loop` prop.\n*   **CSS Variable Theming:**  Achieve consistent branding and easily adjust the visual theme using CSS variables.\n\n## Installation\n\nInstall `svelte-film-countdown` using your preferred package manager:\n\n```bash\nnpm install svelte-film-countdown\n```\n\n```bash\nyarn add svelte-film-countdown\n```\n\n```bash\npnpm add svelte-film-countdown\n```\n\n```bash\nbun add svelte-film-countdown\n```\n\n## Usage\n\nImport the `FilmCountdown` component into your Svelte component:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n\n  let countdownInstance;\n\n  function handleComplete() {\n    alert('Countdown finished!');\n  }\n\n  function handleEachCount(currentCount) {\n    console.log('Current count:', currentCount);\n  }\n\n  function startCountdown() {\n    countdownInstance?.start();\n  }\n\n  function pauseCountdown() {\n    countdownInstance?.pause();\n  }\n\n  function resumeCountdown() {\n    countdownInstance?.resume();\n  }\n\n  function resetCountdown() {\n    countdownInstance?.reset();\n  }\n\u003c/script\u003e\n\n\u003cFilmCountdown\n  bind:this={countdownInstance}\n  initialCount={5}\n  countdownDuration={1000}\n  onComplete={handleComplete}\n  onEachCount={handleEachCount}\n/\u003e\n\n\u003cbr /\u003e\n\u003cbutton on:click={startCountdown}\u003eStart\u003c/button\u003e\n\u003cbutton on:click={pauseCountdown}\u003ePause\u003c/button\u003e\n\u003cbutton on:click={resumeCountdown}\u003eResume\u003c/button\u003e\n\u003cbutton on:click={resetCountdown}\u003eReset\u003c/button\u003e\n```\n\n### Basic Example\n\nRender the countdown with default settings:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n\u003c/script\u003e\n\n\u003cFilmCountdown /\u003e\n```\n\n### Custom Initial Count and Duration\n\nConfigure the starting number and the duration of each count:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n\u003c/script\u003e\n\n\u003cFilmCountdown initialCount={10} countdownDuration={500} /\u003e\n```\n\n### Utilizing Event Callbacks\n\nExecute functions when the countdown finishes or after each count:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n\n  function handleComplete() {\n    console.log('Countdown finished!');\n  }\n\n  function handleEachCount(currentCount) {\n    console.log('Current count:', currentCount);\n  }\n\u003c/script\u003e\n\n\u003cFilmCountdown onComplete={handleComplete} onEachCount={handleEachCount} /\u003e\n```\n\n### Configuration Options via `config` Prop\n\nCustomize the visual appearance of the countdown through the `config` prop:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n\u003c/script\u003e\n\n\u003cFilmCountdown\n  initialCount={3}\n  config={{\n    numberColor: \"red\",\n    numCircles: 4\n  }}\n/\u003e\n```\n\n### Enabling Looping\n\nMake the countdown restart automatically after reaching zero. Note that you need to manually trigger `start()` to begin the countdown:\n\n```svelte\n\u003cscript\u003e\n  import FilmCountdown from 'svelte-film-countdown';\n  let countdownInstance;\n\n  function startLoopingCountdown() {\n    countdownInstance?.start();\n  }\n\u003c/script\u003e\n\n\u003cFilmCountdown bind:this={countdownInstance} loop={true} /\u003e\n\u003cbutton on:click={startLoopingCountdown}\u003eStart Looping Countdown\u003c/button\u003e\n```\n\n## Props\n\n| Prop Name          | Type                          | Default Value | Description                                                                                                       |\n| ------------------ | ----------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------- |\n| `initialCount`     | `number`                      | `5`           | The number from which the countdown begins.                                                                       |\n| `countdownDuration`| `number`                      | `1000`        | The time in milliseconds for each count decrement.                                                                |\n| `onComplete`       | `() =\u003e void`                  | `() =\u003e {}`    | A callback function that is executed when the countdown reaches 0.                                               |\n| `onEachCount`      | `(count: number) =\u003e void`     | `() =\u003e {}`    | A callback function executed after each count, receiving the current count as an argument.                      |\n| `config`           | `object`                      | `{}`          | An object containing properties to customize the visual aspects of the countdown. See the `config` details below. |\n| `loop`             | `boolean`                     | `false`       | If `true`, the countdown will automatically reset to `initialCount` and stop at 0, ready to be started again.   |\n\n### `config` Object Properties\n\n| Property Name           | Type     | Default Value                           | Description                                                                                                       |\n| ----------------------- | -------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| `numberColor`           | `string` | `'var(--countdown-number-color)'`         | The color of the number displayed in the center of the countdown.                                                 |\n| `numCircles`            | `number` | `2`                                       | The number of concentric circles animating around the central number.                                              |\n| `circleRadius`          | `number` | `64`                                      | The radius of the outermost circle in pixels.                                                                     |\n| `circleSpacing`         | `number` | `8`                                       | The space in pixels between each concentric circle.                                                               |\n| `strokeRatio`           | `number` | `1 / 40`                                  | The ratio of the circle's radius that determines the thickness of the circle's stroke.                             |\n| `canvasSize`            | `number` | `256`                                     | The width and height of the SVG canvas (viewBox dimensions). The component will maintain a 16:9 aspect ratio.      |\n| `circleGradientStart`   | `string` | `'var(--circle-gradient-start)'`          | The starting color of the gradient applied to the circles.                                                        |\n| `circleGradientMiddle`  | `string` | `'var(--circle-gradient-middle)'`         | The middle color of the gradient applied to the circles.                                                          |\n| `circleGradientMiddleOpacity` | `number` | `0.8`                                 | The opacity of the middle color in the circle gradient.                                                           |\n| `circleGradientEnd`     | `string` | `'var(--circle-gradient-end)'`            | The ending color of the gradient applied to the circles.                                                          |\n\n## Exported Functions\n\nTo control the countdown programmatically, you need to bind a reference to the `FilmCountdown` component using `bind:this`.\n\n*   **`start()`:** Initiates the countdown sequence.\n*   **`pause()`:**  Temporarily halts the countdown.\n*   **`resume()`:** Continues the countdown from the paused state.\n*   **`reset()`:**  Stops the countdown and resets it to the `initialCount`.\n\n## Theming with CSS Variables\n\nCustomize the visual theme of the `FilmCountdown` component by overriding these CSS variables in your global stylesheet or within a specific component's `\u003cstyle\u003e` block.\n\n```css\n:root {\n  --countdown-number-color: black;\n  --countdown-button-color: rgba(0, 0, 0, 0.8);\n  --countdown-button-text-color: white;\n\n  --film-hole-width: 20px;\n  --film-hole-rect-width: 8px;\n  --film-hole-rect-height: 12px;\n  --film-hole-y-top: 10px;\n  --film-hole-y-bottom: 22px;\n  --film-hole-color: black;\n\n  --sweeping-background-color: rgba(0, 0, 0, 0.15);\n\n  --circle-gradient-start: black;\n  --circle-gradient-middle: black;\n  --circle-gradient-middle-opacity: 0.8;\n  --circle-gradient-end: black;\n\n  --grid-line-color: rgba(255, 255, 255, 0.3);\n  --film-grain-opacity: 0.1;\n  --flicker-duration: 0.15s;\n  --vignette-strength: 0.4;\n  --center-vignette-strength: 0.15;\n  --scratch-color: rgba(255, 255, 255, 0.2);\n  --scratch-opacity: 0.15;\n  --number-font: monospace;\n  --number-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);\n  --film-grain-pattern: linear-gradient(to bottom, rgba(156, 163, 175, 0.05), transparent, rgba(156, 163, 175, 0.05));\n}\n```\n\n**Example of Applying a Theme:**\n\n```svelte\n\u003cstyle\u003e\n  :root {\n    --countdown-number-color: lightyellow;\n    --sweeping-background-color: rgba(100, 0, 0, 0.25);\n    --film-grain-opacity: 0.2;\n  }\n\u003c/style\u003e\n\n\u003cFilmCountdown /\u003e\n```\n\n## Contributing\n\nContributions are highly appreciated! If you find a bug, have an idea for an improvement, or want to add a new feature, please don't hesitate to open an issue or submit a pull request.\n\n## License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbethropolis%2Fsvelte-film-countdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbethropolis%2Fsvelte-film-countdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbethropolis%2Fsvelte-film-countdown/lists"}