Feat/animations library - #39
Draft
AntoniaStr wants to merge 36 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…use tailwind utilities
fix polish(useInView): remove hook, replace with framer motion feat(card-animations): basic scroll reveal animation implementation
serum
force-pushed
the
feat/animations-library
branch
from
June 25, 2026 11:43
d0ab1ac to
cc76f43
Compare
refactor(animations): @Property based primitives & derived @utilities
Co-authored-by: Cursor <cursoragent@cursor.com>
Feat/grid code snippets
… for reusability, add examples, remove animation from component button examples
…n-commits Fix/cherry pick button animation commits
Polish/grid page
feat(product-carousel): basic implementation
…ns library Co-authored-by: Cursor <cursoragent@cursor.com>
feat(animations): update getting started and add a doc page
Co-authored-by: Cursor <cursoragent@cursor.com>
Feat/button expand on hover
Co-authored-by: Cursor <cursoragent@cursor.com>
Rebase animations library and scroll animation gallery onto the flat project structure from develop, preserving all showcase and component work. Co-authored-by: Cursor <cursoragent@cursor.com>
Keep product carousel, animated buttons, and scroll animation sections on the animations showcase page. Co-authored-by: Cursor <cursoragent@cursor.com>
Add team member carousel showcase, team card components, and MDX external link handling on top of the animations library branch. Co-authored-by: Cursor <cursoragent@cursor.com>
feat(team-carousel): basic implementation
Add project carousel component and showcase demo on top of the animations library branch, preserving all existing showcase sections. Co-authored-by: Cursor <cursoragent@cursor.com>
Feat/arian carousel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduces the TaylorUI Animation System — a layered approach combining Tailwind CSS animations and utility classes for simple transitions and Framer Motion for more complex and gesture driven animations. Adds a new Animations documentation section with interactive showcases and a getting-started guide.
What's Included
📚 New Documentation Pages (
/animations)SlideUpOnGroupHover,ConfettiButton,ClickContentSwap, View Transitions, and a "what to copy" portability checklist🧱 Core Animation Library (animations)
CSS utilities (
animations.css) — Tailwind v4@utilityclasses:animate-taylor-fade-up/down/in/left/right,animate-taylor-zoom-in,animate-taylor-spindelay-100throughdelay-500CSS tokens (
tokens.css) — shared--animation-duration-*and--animation-ease-*custom propertiesFramer Motion variants (
variants.ts) —fadeUp,fadeDown,fadeIn,fadeLeft,fadeRight,zoomIn,pageTransition,staggerContainerFramer Motion presets (
presets.ts) —springBounce,springGentle,tweenSmoothReact hooks & components:
useInViewAnimation— Intersection Observer hook that togglesdata-statefor scroll-triggered CSS animationsuseViewTransition/ViewTransitionLink— View Transitions API wrappers for smooth page navigationsClickContentSwap— animated button content swap with layout-shift preventionConfettiButton— particle burst on clickSlideUpOnGroupHover— slide-up text reveal on parent hover⚙️ Infrastructure
experimental.viewTransitionframer-motiondependencyglobals.css— imports the new animation CSSDesign Decisions
@utilityclasses for simple UI state animations (enter/exit, hover). Fall back to Framer Motion only when gestures, stagger timelines, or complex orchestration are needed.data-statepattern: CSS animations are triggered viadata-[state=open]variant selectors, toggled either manually or automatically viauseInViewAnimation. This keeps animations declarative and framework-agnostic.@/animationsso teams can import consistent motion behavior across projects.ClickContentSwapuses a CSS grid with an invisible spacer to prevent button size changes during content transitions.