TypographyMotion
Recreation of Thibaud Allie's letter stagger animation.
Install / Use
/learn @codrops/TypographyMotionREADME
Typography Motion Effect
The demo for the tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js, based on Thibaud Allie's work as seen on Dani Morales.
Installation
Install dependencies:
npm install
Compile the code for development and start a local server:
npm start
Create the build:
npm run build
Credits
- Recreation of the animation seen on http://www.danimorales-style.com/ designed by Thibaud Allie.
- Image by Silviu Beniamin Tofan from Unsplash.com
Misc
Follow Codrops: Twitter, Facebook, GitHub, Instagram
License
Made with :blue_heart: by Codrops
Related Skills
diffs
342.5kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-pro-max-skill
55.6kAn AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
