{"id":16261158,"url":"https://github.com/dulnan/css-vhs-glitch","last_synced_at":"2026-03-18T18:42:28.882Z","repository":{"id":85887051,"uuid":"43225235","full_name":"dulnan/css-vhs-glitch","owner":"dulnan","description":null,"archived":false,"fork":false,"pushed_at":"2015-09-26T23:31:02.000Z","size":5396,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-31T03:02:14.122Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/dulnan.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}},"created_at":"2015-09-26T22:18:53.000Z","updated_at":"2022-09-17T20:46:15.000Z","dependencies_parsed_at":"2023-03-13T07:18:59.886Z","dependency_job_id":null,"html_url":"https://github.com/dulnan/css-vhs-glitch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dulnan/css-vhs-glitch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcss-vhs-glitch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcss-vhs-glitch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcss-vhs-glitch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcss-vhs-glitch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dulnan","download_url":"https://codeload.github.com/dulnan/css-vhs-glitch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dulnan%2Fcss-vhs-glitch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28912911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T12:13:43.263Z","status":"ssl_error","status_checked_at":"2026-01-30T12:13:22.389Z","response_time":66,"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":[],"created_at":"2024-10-10T16:40:38.966Z","updated_at":"2026-01-30T12:33:51.329Z","avatar_url":"https://github.com/dulnan.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS3 VHS Glitch Effect\n**[The Demo](http://dulnan.net/vhs)**\n\n![Alt text](vhs-glitch.gif?raw=true)\n\nOnly works with Chrome. Oh and you need a fast machine.\nUsing CSS filters and animations, no JavaScript.\n\n## why\n¯\\\\\\_(ツ)_/¯ \n\n## How does it work?\nThe main thing is dividing the image into 200 lines. This is achieved by having 200 elements with the image as the background placed above each other and then clipping each with `clip-path` to only show a line, basically.\nThese elements are then animated to move back and forth, with each having a slight delay. Pair this with a custom timing function with cubic-bezier to get only a small portion of the lines moving at a given time.\n\nThis is then blurred and placed on top of the original image.\n\nThe rest is basically just simple keyframe animations that move the image slightly and apply various filters. Especially `hue-rotate` and `grayscale` are useful here.\n\n## How to compile\nInstall all the dependencies with `npm install` and then compile using `gulp`.\n\n## Files and folders\nThe *demo* folder contains the minified css file and *vhs.html* where the stylesheet is embedded.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fcss-vhs-glitch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdulnan%2Fcss-vhs-glitch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdulnan%2Fcss-vhs-glitch/lists"}