Ship beautiful
products 2X faster
Create stunning Awwwward-type animations with React, Tailwind CSS, ThreeJs, and Framer Motion.
Save countless hours, enhance your projects, and increase your website traffic.
20+ Developers love BuildFast
Why spend weeks creating animations?
Get whole documentation to save time!
Coding without BuildFast
- Struggle to understand consepts
- Spend hours experimenting
- Risk inconsistent results
- Requires advanced knowledge
- Delays your project timeline
Coding with BuildFast
- Step-by-step guidance
- Documentation
- Create professional animations effortlessly
- Learn tools like Framer Motion and Three.js
- Boost your productivity and creativity
What will you be
able to build ?
Just a couple of examples 👇
I always wondered HOW DO PEOPLE make those websites on Awwwards ⁉️ But BuildFast made it easy with its documentation!
-Patrick
🚫 Instead of wasting 20+ days on learning from nowhere...
WARNING: You'll won't be able to stop
once you start...
Fast UI Components
Just copy and paste html + css and implement amazing buttons into your websites!
Mouse Image Distortion
A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion
Background Image Parallax
A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion
Perspective Section Transition
A website tutorial featuring a perspective transition animation with a smooth scroll using React, Framer Motion, Next.js and Lenis Scroll. Inspired by https://www.joinflowparty.com/
Text Parallax
A website animation featuring a Text Parallax with sliding text on scroll, made with Framer Motion and React, inside a Next.js app
Sticky Footer
A website tutorial featuring a sticky footer animation with a reveal effect, made with position fixed and sticky using React and CSS.
Paint Reveal
A website tutorial on making a paint reveal / erasing effect using the destination out blend mode of the canvas API, made with React and Next.js
3D Wave on Scroll
A website animation tutorial featuring a vertex shader with a wave animation applied on a plane. Made with React-three-fiber, Framer Motion and Next.js
Blend Mode Cursor
A website tutorial featuring a moving cursor on mouse move, colored with CSS blend mode difference, made with React and GSAP. Inspired by https://trionn.com/
Text Along Path
A website tutorial on how to animate a a Text along an SVG Path on Scroll using React and Framer Motion. Used with the Lenis Scroll for added smoothness and Next.js
3D Glass Effect
A website tutorial on how to create a Glass looking Material with distortion by using the MeshTransmissionMaterial with Three.js, React, React Three Fiber and Next.js.
Text Gooey
How to Make a Text Gooey Morph Effect Using SVG filters feGaussianBlur and feColorMatrix. All inside a Next.js application and animated with Framer Motion. Inspired by: https://codepen.io/supah/pen/abVGjVq
Text Gradient Scroll Opacity v2
A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion
Cards Parallax
A website Smooth Scroll Cards Parallax animation tutorial featuring Lenis Scroll, Framer Motion all inside a Next.js application. Inspired by many awwwards winning websites.
Awwwards Side Menu
A website tutorial featuring the rebuild of a menu from an Awwwards winning website, made with Framer Motion and Next.js, inspired by: https://agencecartier.com/fr
3D Float Effect
A web animation tutorial that showcases how to create a 3D float effect using Three.js inside a Next.js application. The float is made with React Three Drei and Framer Motion.
Pixel Transition
A web animation tutorial featuring a centered, horizontal and vertical pixel transition effect using Next.js and Framer Motion
Sticky Cursor
A website animation tutorial featuring a sticky and magnetic cursor effect made with Next.js, Framer Motion and the Math.Atan2() function.
3D Cube
Build a Simple 3D Animated Cube using Three.js, Next.js and Framer Motion
3D Earth
Build a 3D Earth with Smooth Scroll Rotation using Three.js, Framer Motion and Next.js
Split Vignette
A split image animation using clip-path css value, animated with framer motion and Nextjs. Inspired by: https://tux.co/en/
Magnetic Button
2 Ways to Make a Magnetic Buttons using React, GSAP, Framer Motion. See the difference in terms of implementation for a magnetic effect between GSAP and Framer Motion.
Smooth Parallax Scroll
A web animation tutorial featuring a Smooth Vertical Parallax Image Scroll Gallery made with Framer Motion, Lenis Scroll and Nextjs. Inspired by:https://mill3.studio/en/projects/gsoft/
Mask Cursor Effect
A custom cursor with a mask hover effect revealing text underneath. Made with Nextjs and Framer Motion. Insipired by: https://minhpham.design/
Awwwards Landing Page
An Awwwards portfolio landing page rebuild. Originally made by Dennis Snellenberg, he won an awwwards with his amazing portoflio. Remade the landing page using Next.js, Framer Motion and GSAP. See the original: https://dennissnellenberg.com
Sliding Stairs Menu
A website tutorial featuring an animated menu that comes from an awwwards winning website. Features a stair-like animation with an infinite slider. Inspired by https://k72.ca/travail
Floating Image Gallery
A website tutorial on how to make a floating image gallery using Nextjs and GSAP. It's an animaiton where images move with the movement of the cursor using gsap.
Mouse Scale Image Gallery
A website tutorial featuring a mouse interactive project gallery from an awwwards winning website, made with Nextjs. Inspired by https://decimalstudios.com/work.
Curved Menu
A website tutorial on how to make an awwwards curved menu using Nextjs, GSAP and Framer Motion. A curve is created using SVG path commands Inspired by https://dennissnellenberg.com/.
Navigation Menu
A website tutorial on how to make an Awwwards Navigation bar menu using Nextjs and Framer Motion. Inspired by the awwwards winning website https://props.studiolumio.com/
Smooth Scroll
A website tutorial on how to make a one pager landing page with a smooth scroll using Nextjs, GSAP and Locomotive Scroll v5
Project Gallery Mouse Hover
An awwwards winning website tutorial with a project gallery featuring a hover animation using Nextjs, GSAP and Framer Motion. Inspired by: https://dennissnellenberg.com/
Text Gradient Opacity On Scroll
A character by character opacity animation applied on text while scrolling, made with React, Next.js and GSAP ScrollTrigger plugin.
Text Disperse Effect
A text hover animation featuring a dispel effect using NextJs, GSAP and Framer Motion
Infinite Text Move On Scroll
An infinite text moving animation with scroll interaction using React and Next.js. Picture by Eric Asamoah.
Svg Curve Loading
A loading screen using an animated curved SVG using React and Next.js
Text Clip Mask On Scroll
An on scroll animation that gradually expands a text mask that clips a video, made with React, CSS and Next.js.
Image slide project gallery
A project gallery animation featuring an image slide effect using the width auto animation of Framer Motion. Made with React and Next.js. Inspired by https://locomotive.ca/
Mouse Image Gallery
A mouse moving image gallery that features a collection of images that gradually appears as the mouse move. Made with React in a Next.js environment. Inspired by https://bridget.pictures/ and images taken by Kin Coedel.
Pixel Cursor Trailing
A pixel trailing effect created with React. As the cursor moves, squares are created along the mouse to create an effect of trailing. Made with React and Next.js
Text Mask Animation
An animation featuring a text sliding effect with a mask, to give the effect of text gradually appearing when in view. Made with React and Framer Motion in a Next.js environment.
3D Perspective Text
A 3d perspective text animation made with CSS using the transform style, perspective and transform attribute. Created with React in a Next.js framework.
Svg Bezier Curve
A common svg wave animation seen in a lot of awwwards website. Made with React, Next.js and the Sine function. Inspired by https://hello.cuberto.com
Project Gallery Colored Card
A hover animation website tutorial using NextJs and GSAP on a colourful project gallery. Inspired by https://anacuna.com/
Cartoon Cursor Trailing
A cartoonish mouse trailing animation, made with React in a Next.js environment.
And you will also get tons oh those, just copy/paste...
Smooth Button
Pop Up Button
Electric Button
Space Button
Smooth Button V2
BuildFast Full Package
Get access to 40+ super cool animations in one amazing package!- Get ALL 40+ unique animations ready to use
- Whole step-by-step documentation
- Perfect for Next.js, React.js and Three.js projects
- Lifetime access with no subscription
- Boost your creativity and impress clients!
BuildFast + Boilerplates
Become a better developer!- Everything from BuildFast
- MERN stack + Next.js boilerplate
- SEO-optimized UI components
- Components & animations
- TG community!
Frequently Asked Questions
What do I get exactly?
What is used for those animations?
How often is BuildFast updated?
Do I need coding knowledge?
If you buy BuildFast package for 45$, you will get a password for the email you entered during the payment, and once you are logged in, you will be able to get any animation(ZIP) you want and in addition you will get access to the documentation of BuildFast with all codes explained!
Next.js - Framer Motion - ReactJs - ThreeJs and more!
I build new animations everyday, so I'm updating it regularly.
Basic knowledge helps, but we provide guides/codes to get you started.
I customized my website with amazing animations! I truly liked it + i learned a lot :)
-DanielLink: www.ThePlum.us