{"id":14990262,"url":"https://github.com/maximeij/css-text","last_synced_at":"2026-01-18T22:34:04.593Z","repository":{"id":224262473,"uuid":"760092556","full_name":"MaximeIJ/css-text","owner":"MaximeIJ","description":"🔠 Web Component to render text using animatable CSS art while keeping browser text a11y","archived":false,"fork":false,"pushed_at":"2024-06-18T23:06:41.000Z","size":356,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-24T01:47:28.276Z","etag":null,"topics":["css","css-art","css3","typescript","vanilla-javascript","web-component"],"latest_commit_sha":null,"homepage":"http://maximeij.dev/css-text/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaximeIJ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-02-19T19:14:53.000Z","updated_at":"2024-06-23T06:08:28.000Z","dependencies_parsed_at":"2024-02-24T22:29:46.547Z","dependency_job_id":"9ce0a095-9a71-4708-87c3-c5dca66361ff","html_url":"https://github.com/MaximeIJ/css-text","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"43ec7fe275c577a20e0ba05f78954e695c0e4ec2"},"previous_names":["maximeij/css-text"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaximeIJ%2Fcss-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaximeIJ","download_url":"https://codeload.github.com/MaximeIJ/css-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238915079,"owners_count":19551791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","css-art","css3","typescript","vanilla-javascript","web-component"],"created_at":"2024-09-24T14:19:47.778Z","updated_at":"2025-10-30T00:31:47.050Z","avatar_url":"https://github.com/MaximeIJ.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-text [![npm (scoped)](https://img.shields.io/npm/v/@maximeij/css-text?color=green\u0026label=npm%20package\u0026logo=logo)](https://www.npmjs.com/package/@maximeij/css-text) [![image](http://vanilla-js.com/assets/button.png)](http://vanilla-js.com/)\n\nWeb Component to render text using CSS art allowing transitions between letter parts for text transform animations. While each character is wrapped in an html tag (`\u003ci\u003e` for now), it's intended to integrate like regular text, being selectable, copy-pastable, and accessible.\n\n## Quick start\n\n```npm\nnpm i @maximeij/css-text\n```\n\nRemember to import the css (includes the default monospace font)\n\n```typescript\nimport '@maximeij/css-text';\nimport '@maximeij/css-text/css';\n```\n\nYou need a font to determine the final shape of each letter. We currently provide a monospace adaptation in [src/fonts/monospace.css](src/fonts/monospace.css)\n\n```html\n\u003ccss-text class=\"monospace\"\u003eCSS-TEXT DEMO\u003c/css-text\u003e\n```\n\n## Going further\n\nIn the default `monospace` font, each letter is rendered using the `::before` and `::after` pseudo-elements. They are represented at `border-box` sized `absolute`ly positioned transparent boxes with borders sized and shaped to imitate sections of the letter.\n\nRegardless of the font's ultimate implementation of the art, this opens the possibility to animate the shape of each letter to some extent. In the `monospace` example provided, `transition`s can be configured to allow for the effect of a letter morphing into another one when a piece of text changes.\n\nIt could also allow for `animation` properties to further animate one or more letters, and combine with existing CSS concepts like `:hover` and `:selected`.\n\n### Example\n\nSee [index.html](index.html) for a quick example of how to invoke it the component and customize it. The [demo](demo/main.ts) TS code has examples of ways to enable animation on changing text and granular `transition`s.\n\n## Recent changes\n\n- [Changelog](CHANGELOG.md)\n\n## Coming soon\n\n- Lowercase alphabet\n- Punctuation\n- React version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximeij%2Fcss-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximeij%2Fcss-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximeij%2Fcss-text/lists"}