Discover the best hero websites created by professional designers. Get inspired and start planning your perfect hero web design today!

Full Landing Page + All Details - https://janlosert.com/webflow-cards

My first fully web-based UI Template, 100% developed in Webflow Designer. All elements ready to copy & paste or fully clone into your projects! 

I prepared all styles for all the main typography elements (H1-H6, links, paragraphs etc.), button, tags, alerts or social icons. And then using these “atoms” create as many cards as possible for you to have a nice starting field for new designs. I ended up with 28 cards in total My main aim was to create something visually beautiful for new users or developers who are, to put it nicely non-designers.. All of them are obviously responsive in all Webflow stages. There are 2 hero sections, nice product cards, article thumbnails for the blog or even sign up dialogue with all form elements covered.

Cards - Webflow UI Kit

A new concept from IMDB website built from scratch in webflow.

Prototype JP Teixeira - Visual Designer

New concept for IMDB

Learn how to build this and many other interactions on my YouTube Channel at https://www.youtube.com/watch?v=gSWQPaybNiI

Learn how to build a working CMS Pricing Calculator and other Javascript lessons on my Patreon at https://www.patreon.com/timothyricks

T.RICKS Glassmorphism

TLDR; people seem to like this circular text with movement, so I thought I'd try and see if I couldn't hack in WF. I did. This is that.

Powered by circletype.js, it's a little wonky and weird with regards to how it's sized... but it works. Includes interactions for page load, scrolling through sections, and for page transitions.

Clone away, and let me know what you think in the comments!

Circle Text

Trendy AF Circular Text

Please read: All I ask is that you Like & Share if you clone it :)

Here is a custom animated slider with really cool animations for 3 slides.
Every part of it is connected to the CMS:

- Video Light Box
- Business Info
- Animated Rotating Text
- Leading Text & Caption
- CTA Button

You can also change the rotating text color for each one in the interactions. Just look for the one that says text-color and you can select any color you want it to transition to. 

I hope you guys have fun with it! 
Enjoy!

Hero Loop

Custom Animated Hero Slider - CMS

A live, drawing canvas where you can influence the pixels. 

Interactivity can make visitors feel engaged in a fun way. I used sketch.js for the drawing canvas. Use your cursor or touch to draw right on the screen.

David's portfolio - https://www.davidfiz.com was one of the most pleasant landing pages I've seen, and I wanted to see if I could rebuild it with a touch of design. I have layered lots of interactions on top. Sketch.js is used for the drawing effect.

Sketchable Porfolio

Interactive Sketch Portfolio

Playing with Rotational Parallax and illustrations from Open Doodles
https://www.opendoodles.com/

Rotational Parallax Illustrations

rotational-parallax-illustrations

Moving Background Gradient with dark theme inspired by Webflow Community hero section

Moving Gradient Background

Revealing texts from different directions is a very popular animation these days. You can find it in hundreds of the best sites, like the one that inspired me: Vendredi Society (https://www.vendredi-society.fr/)
---
The best thing is, it is not hard at all to achieve. In this clonable you can find a simple way to achieve this animation from different sides: top, right, bottom, left.
---
Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-text-that-reveals-from-different-directions

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

18 of 50

Text reveal different directions

Text Reveal Different Directions

Trying to improve my animations technics using the native interactions by creating fun character loops. :)

CharacterByLA

characterbyla

This cloneable was requested by members of the Webflow designers facebook group and is a rebound of someone else's shot.

Bike

Bike Hero Interaction

Saw this cool interaction by UI8 on Dribbble and had to try and recreate it! I liked this concept as a hero space, so I added a modern nav to it that goes vertical on MVP to compliment the space. Let me know what you think in the comments, and clone away!

Design credit: "Call to Action" by Anton Tkachev for UI8 (https://dribbble.com/shots/6479771-Qaitomo-Call-To-Action),

Call to Action

Rad Mouse Movement Hero! - Joshwork Dribbble series ft. UI8

Playing around with a parallax effect using the text of David Foster Wallace's 2005 Commencement Speech at Kenyon College.

Arthur

This is Water

After the great feedback we received from you guys, we are back with a new cloneable project, this time in the form of a slider. 🎉

TravelSea - Slider

TravelSea - Slider Interaction

Sticker interaction I coded for a recent tutorial on my Webflow YouTube channel at https://www.youtube.com/c/timothy-ricks

T.RICKS Stickers

Rebuild of https://wickret.cuberto.com/ hero

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Wickret

Wickret Hero

To announce the new blending mode and backdrop filter features, Webflow reached out asking me to design and develop three eye-catching builds in two days. I quickly asked two of my friends, Shelby & Corey, for help creating the designs. This is one of the concepts that was chosen.

Project Team
Corey, https://dribbble.com/coreyschneiderdesign
Shelby, https://dribbble.com/shelbybuquet
Timothy, https://dribbble.com/tricks

Artsnob

Welcome to Dribbble series, where I attempt to bring to life projects created by popular Dribble artists using only the elements supplied by Webflow! Todays project is web design 04 - Photo Studio by Romeo M. • https://dribbble.com/shots/5593011-web-design-04-Photo-Studio

In my freelancing using Webflow, 95% of my work involves creating crazy, weird sliders that accomplish certain goals. This project is peak slider; displaying information, using grid, with customizations applied to the snide nav, arrows, & content.

For this project, I opted to change a few things that didn't make sense. For example, there were 3 different places in the page where social links were listed, which felt like overkill. I also nixed the mouse icon in the prev/next section, as the slider doesn't let you interact like that. Clone away, and let me know what you think in the comments! Be sure to download the Fontawesome font family to make sure the icons work (https://fontawesome.com/cheatsheet)

Discover hero websites built by the Webflow community

Discover hero websites built by the Webflow community