https://motion-primitives.com/docs/scroll-progress

https://motion-primitives.com/docs/text-morph

https://motion-primitives.com/docs/dialog

https://www.julienthibeaut.xyz/lab/underlay-action-sheet

https://www.ibelick.com/lab/curved-tab-bar

https://motion-primitives.com/docs/image-comparison

https://www.ibelick.com/lab/subtle-3d-carousel

https://motion-primitives.com/docs/text-shimmer

https://www.julienthibeaut.xyz/lab/progressive-blur

motion-primitives.com/docs/infinite-slider

https://motion-primitives.com/docs/cursor

motion-primitives.com/docs/animated-background

motion-primitives.com/docs/transition-panel

https://motion-primitives.com/docs/text-loop

motion-primitives.com/docs/animated-group

https://motion-primitives.com/docs/disclosure

https://motion-primitives.com/docs/text-effect

https://www.julienthibeaut.xyz/lab/fractal-glass

https://motion-primitives.com/docs/border-trail

https://motion-primitives.com/docs/magnetic

https://www.julienthibeaut.xyz/lab/vision-os-icon

https://www.ibelick.com/lab/3d-photo-carousel-2

https://motion-primitives.com/docs/in-view

Tilt component

motion-primitives.com/docs/tilt

Animated Scroll Progress now live on motion-primitives

https://motion-primitives.com/docs/scroll-progress

Introducing Text Morph:  
Animates text by morphing shared letters between words. 

https://motion-primitives.com/docs/text-morph

New Dialog component for motion-primitives.

https://motion-primitives.com/docs/dialog

Spinning Text 

code: motion-primitives.com/docs/spinning-…

Made this underlay action sheet with framer-motion

Code and demo here: https://www.julienthibeaut.xyz/lab/underlay-action-sheet

New Accordion component for motion-primitives.

motion-primitives.com/docs/accordion

Made a curved tab bar, inspired by the PlayStation mobile app

Check out the code and demo
https://www.ibelick.com/lab/curved-tab-bar

Image Comparison: Customize spring, slider, and more

https://motion-primitives.com/docs/image-comparison

Subtle 3D carousel

https://www.ibelick.com/lab/subtle-3d-carousel

Text Shimmer

https://motion-primitives.com/docs/text-shimmer

Experimenting with progressive blur effects, made in CSS.

Code and playground: https://www.julienthibeaut.xyz/lab/progressive-blur

I made a collection of Tailwind CSS buttons, it's free, easy to integrate with a simple copy-paste, no javascript.

This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates 

https://buttons.ibelick.com/

Introducing Motion-Primitives Pro: building blocks to help you build a beautiful website, faster.

Pre-order for early access to over 50+ beautiful building blocks, sections and templates at a significant discount.

Available January 2025.

https://pro.motion-primitives.com/

Nice effect with Motion-Primitives by combining Tilt and Spotlight components, simple as this

<Tilt>
  <Spotlight>
    ...
  </Spotlight>
</Tilt>

New Infinite Slider component. Change speed on hover, vertical or horizontal layout.

 code here: motion-primitives.com/docs/infinite-slider

Introducing Cursor component for motion-primitives

https://motion-primitives.com/docs/cursor

3D photo carousel

ibelick.com/lab/3d-photo-carousel

Just added Animated background to motion-primitives!

Now in the documentation with examples.

motion-primitives.com/docs/animated-background

Introducing Motion-Primitives: a foundational library of motion components that you can easily integrate into your apps.

It's currently in early beta, expect significant updates and many more components soon!

motion-primitives.com

little timeline / progress indicator / navigation component

Little popover menu created with framer-motion, inspired by the Family app

Just added Transition Panel to motion-primitives

motion-primitives.com/docs/transition-panel

Text Loop

https://motion-primitives.com/docs/text-loop

Animated Group, easily animate lists, grids,  and collections with presets or custom variants.

motion-primitives.com/docs/animated-group

Disclosure component is now live!

https://motion-primitives.com/docs/disclosure

polaris buttons 

added to http://buttons.ibelick.com/

Popover slide selector

ibelick.com/lab/popover-sl…

Text Effect component now live on motion-primitives

https://motion-primitives.com/docs/text-effect

Spotlight component: easily create a classic spotlight effect that follows the cursor

motion-primitives.com/docs/spotlight

Gooey menu, made with SVG filters, linear() easing, and Tailwind CSS  

https://www.ibelick.com/lab/gooey-menu

Text Morph in action

motion-primitives.com/docs/text-morph

Text effect updated: new props to make it easier to control the speed

https://motion-primitives.com/docs/text-effect

New CSS exploration on my site: fractal glass.

You can find the code and an interactive playground here
https://www.julienthibeaut.xyz/lab/fractal-glass

Just added Border Trail to motion-primitives.

An animated border that adapts to any container, easy to stylize, update the transition, and more.

https://motion-primitives.com/docs/border-trail

Magnetic, with easy customization for range, intensity, action area, and more!

https://motion-primitives.com/docs/magnetic

Text Scramble: Easy customization for duration, speed, custom trigger and character set

motion-primitives.com/docs/text-scramble

experiment of the day: I recreated the visionOS app icon for the web using framer motion.

https://www.julienthibeaut.xyz/lab/vision-os-icon

new carousel exploration

https://www.ibelick.com/lab/3d-photo-carousel-2

New Dock component available!

https://motion-primitives.com/docs/dock

Feeling nostalgic, so I recreated the classic "Slide to Unlock" feature from early iOS.

New InView component added to motion-primitives. 

Easily trigger animations when elements are in the viewport

https://motion-primitives.com/docs/in-view

Posts