{"id":41961463,"url":"https://github.com/nocksock/osc-css","last_synced_at":"2026-01-25T22:57:22.824Z","repository":{"id":279051769,"uuid":"937583778","full_name":"nocksock/osc-css","owner":"nocksock","description":"CSS properties to animate numeric values where they are needed using oscillators and envelopes.","archived":false,"fork":false,"pushed_at":"2025-06-28T16:35:19.000Z","size":1806,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T12:48:22.274Z","etag":null,"topics":["animation","css","css-animation","css-properties","oscillators"],"latest_commit_sha":null,"homepage":"https://osc.style","language":"CSS","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/nocksock.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}},"created_at":"2025-02-23T12:27:32.000Z","updated_at":"2025-03-09T21:15:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"9871ba23-9a1a-4885-931e-d080744ba74d","html_url":"https://github.com/nocksock/osc-css","commit_stats":null,"previous_names":["nocksock/osc-css"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/nocksock/osc-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocksock%2Fosc-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocksock%2Fosc-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocksock%2Fosc-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocksock%2Fosc-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nocksock","download_url":"https://codeload.github.com/nocksock/osc-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nocksock%2Fosc-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28761364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T20:56:06.009Z","status":"ssl_error","status_checked_at":"2026-01-25T20:54:48.203Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","css","css-animation","css-properties","oscillators"],"created_at":"2026-01-25T22:57:22.167Z","updated_at":"2026-01-25T22:57:22.817Z","avatar_url":"https://github.com/nocksock.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!WARNING]\n\u003e This is still pre 1.0 and under development. Breaking changes are to be expected.\n\n# OSC.CSS\n\n Helpers to animate numeric values where they are needed using oscillators and envelopes.\n\n- Pure CSS, 0 dependencies\n- 4 free running, independent Oscillators, each through zero + normalised.\n- One DAHD envelope\n\n## Overview for audio synthesis buffs\n\nIf you're familiar with audio synthesis, it will be faster to give an overview:\n\n`osc.css` provides 6 different, free running oscillators (sin, cos, saw, tri), each available as through zero (lowercase) and normalised (uppercase).\nEach oscillator's frequency can be adjusted independently in Hz.\nIt also provides one DAHD envelope generator, where each stage can be independently adjusted.\nThe envelope generator can loop or run a fixed amount of iterations.\n\nFM is possible, but not yet documented - the API for that is work in progress.\n\n## Installation\n\n### Recommended way\n\nCopy the `osc.css` file into your project and import it.\n\n```bash\nwget https://raw.githubusercontent.com/nocksock/osc-css/main/osc.css \\\n    -O path/to/assets/osc.css\n```\n\n### As package\n\n```bash\nnpm install osc-css\n```\n\nIn your CSS file:\n\n```css\n@import \"osc-css/osc.css\";\n```\n\nImport via esm coming very soon.\n\n\n### Via CDN\n\n```css\n@import \"https://unpkg.com/osc-css\";\n```\n\n## Usage\n\n```css\n.wiggle {\n    animation: var(--osc);\n    /* use any of the oscillators in your calculations */\n    /* this rotate from -20deg to 20deg, use --osc-SIN to go from 0...1 */\n    rotate: calc(var(--osc-sin) * 20deg);\n}\n```\n\n## API\n\nAll time-based properties (phase, envelope stages) use seconds as an **implied** unit.\nSo you must not include a unit when changing time-based properties.\n\n### Global Settings\n\n- `--osc-state`: Controls [animation state]. Values: `running` (default) or `paused`\n- `--osc-env-iterations`: Number of times the envelope repeats. Default: `infinite`\n- `--osc-phase`: The global phase offset for all oscillators in seconds. Default: `0s`\n- `--osc-frequency`: The global frequency in Hz; But **without unit**, since no browser has actually implemented it at the moment. Default: 2\n\n### Oscillators\n\n- `--osc-sin`: Sine Wave. Range: `-1...1` (ease-in-out)\n- `--osc-cos`: Cosine Wave. Range: `-1...1` (ease-in-out)\n- `--osc-saw`: Saw Wave. Range: `-1...1` (linear)\n- `--osc-tri`: Triangle Wave. Range: `-1...1` (linear)\n\n#### normalised\n\n- `--osc-SIN`: Sine Wave. Range: `0...1` (ease-in-out)\n- `--osc-COS`: Cosine Wave. Range: `0...1` (ease-in-out)\n- `--osc-SAW`: Saw Wave. Range: `0...1` (linear)\n- `--osc-TRI`: Triangle Wave. Range: `0...1` (linear)\n\n### Individual Oscillator Settings\n\nEach oscillator can be configured independently, where `*` must be one of: `sin, cos, saw, tri`\n\n- `--osc-*-frequency`: frequency of waveform (overrides global frequency)\n- `--osc-*-phase`: Phase offset for individual waveform\n\n### Envelope Generator\n\nThe DAHD (Delay-Attack-Hold-Decay) envelope can be configured with these parameters:\n\n- `--osc-env`: The envelope value. Range: `0...1` (DAHD)\n\n#### Settings\n\n- `--osc-delay`: Delay time before envelope starts\n- `--osc-attack`: Attack time (fade in)\n- `--osc-hold`: Hold time at peak value\n- `--osc-decay`: Decay time (fade out)\n\n### Animation Utilities\n\n- `--osc`: Combines all oscillators and envelope into a single animation property\n- `--osc-only-*`: Isolated wave animation\n- `--osc-only-envelope`: Isolated envelope animation\n\n## Examples\n\n```css\n/* Basic oscillating animation */\n.element {\n  animation: var(--osc);\n  translate: 0 calc(var(--osc-sin) * 100px)); /* -100px...100px */\n  /* or with envelope */\n  translate: 0 calc(var(--osc-sin) * 100px * var(--osc-env)); \n}\n\n/* Custom frequency and envelope */\n.custom-animation {\n    animation: var(--osc);\n    --osc-frequency: 0.5;\n    --osc-attack: 2;\n    --osc-hold: 1;\n    --osc-decay: 3;\n}\n\n/* Using normalized (0...1) oscillators */\n.fade {\n    animation: var(--osc);\n    opacity: var(--osc-SIN);\n}\n```\n\n## Caveats\n\nThe calculations can easily become *very demanding* on the browser, especially when using\nusing the envelope generator and all oscillators at the same time; which is the default. \nTreat it similar to `transition: all` and always refactor to only use the oscilattors you need.\n\n[animation state]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocksock%2Fosc-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnocksock%2Fosc-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnocksock%2Fosc-css/lists"}