{"id":16854330,"url":"https://github.com/wuweiweiwu/react-letter-morph","last_synced_at":"2025-04-11T07:16:10.983Z","repository":{"id":57333867,"uuid":"119757284","full_name":"wuweiweiwu/react-letter-morph","owner":"wuweiweiwu","description":"React component for rendering morphing letters as seen on the Google 2016 I/O website https://events.google.com/io2016/","archived":false,"fork":false,"pushed_at":"2018-02-02T06:50:17.000Z","size":3130,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-21T12:30:14.805Z","etag":null,"topics":["animation","canvas","google-io-2016","react","svg","tween"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/wuweiweiwu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-31T23:36:26.000Z","updated_at":"2023-11-29T22:31:59.000Z","dependencies_parsed_at":"2022-08-29T13:01:39.827Z","dependency_job_id":null,"html_url":"https://github.com/wuweiweiwu/react-letter-morph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuweiweiwu%2Freact-letter-morph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuweiweiwu%2Freact-letter-morph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuweiweiwu%2Freact-letter-morph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wuweiweiwu%2Freact-letter-morph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wuweiweiwu","download_url":"https://codeload.github.com/wuweiweiwu/react-letter-morph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358603,"owners_count":21090405,"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":["animation","canvas","google-io-2016","react","svg","tween"],"created_at":"2024-10-13T13:54:49.213Z","updated_at":"2025-04-11T07:16:10.929Z","avatar_url":"https://github.com/wuweiweiwu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-letter-morph [![Build Status](https://travis-ci.org/wuweiweiwu/react-letter-morph.svg?branch=master)](https://travis-ci.org/wuweiweiwu/react-letter-morph)\n\nReact Letter Morph :sparkles: Inspired by https://events.google.com/io2016/\n\n[![NPM](https://nodei.co/npm/react-letter-morph.png)](https://nodei.co/npm/react-letter-morph/)\n\n## [Demo](http://weiweiwu.me/react-letter-morph)\n\n![Example](https://media.giphy.com/media/xThtagc1XRkXN0fomA/giphy.gif)\n\n## Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport LetterMorph from 'react-letter-morph';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cLetterMorph\n        words={['I', 'LOVE', 'YOU']}\n        colors={'#ff0049', '#ffffff'}\n      /\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Options\n\n### Letter Morph\n\n| Prop               | Type             | Description                                                              | Default                    |\n| ------------------ | ---------------- | ------------------------------------------------------------------------ | -------------------------- |\n| words _(required)_ | array of strings | Words that you want letter morph to transition from and to               |                            |\n| colors             | array of strings | array of css colors that the letters will be drawn in                    | `[]`                       |\n| height             | number           | height of the rendered canvas (px)                                       | `200`                      |\n| width              | number           | width of the rendered canvas (px)                                        | `500`                      |\n| fontUrl            | string           | url or path of the font. Can be .WOFF, .OTF, .TTF                        | [below](#default-font-url) |\n| fontSize           | number           | size of the font (px)                                                    | `200`                      |\n| lineWidth          | number           | thickness of the outlines (px)                                           | `2`                        |\n| period             | number           | how long it takes for words to transition (smaller the faster)           | `2`                        |\n| speed              | number           | how long it takes for color to transition (smaller the faster)           | `2`                        |\n| steps              | number           | steps in each period (smaller the more efficient but rougher animations) | `500`                      |\n| style              | object           | inline css styling for the canvas element                                | `{ position: 'relative' }` |\n\n#### Default font url\n\n`https://fonts.gstatic.com/s/pacifico/v9/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff`\n\n## Troubleshooting\n\n**I can't see the animation** make sure your `height` and `width` are large enough that the animation is displayed\n\n**It's just black** set the `colors` prop\n\n## Contributing\n\nAfter cloning the repository and running `npm install` inside, you can use the following commands to develop and build the project.\n\n```sh\n# Starts a webpack dev server that hosts a demo page with the component.\n# It uses react-hot-loader so changes are reflected on save.\nnpm start\n\n# Start the storybook, which has several different examples to play with.\n# Also hot-reloaded.\nnpm run storybook\n\n# Runs the library tests\nnpm test\n\n# Lints the code with eslint\nnpm run lint\n\n# Lints and builds the code, placing the result in the dist directory.\n# This build is necessary to reflect changes if youre\n#  `npm link`-ed to this repository from another local project.\nnpm run build\n```\n\nPull requests are welcome!\n\n## License\n\nMIT\n\n## Credits\n\n* [Rachel Smith](https://codepen.io/rachsmith/details/ONVQWv) for the original inspiration\n* [lichin-lin](https://github.com/lichin-lin) for how to get the letter paths\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuweiweiwu%2Freact-letter-morph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwuweiweiwu%2Freact-letter-morph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwuweiweiwu%2Freact-letter-morph/lists"}