Vibefolio
Vibefolio is a bold, image-first Framer portfolio template designed to help creatives and studios showcase their work with clarity and confidence.
Template Details:
Pages:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 10.419 C 0 9.692 0.271 8.992 0.759 8.454 L 7.575 0.956 C 8.129 0.347 8.914 0 9.737 0 C 10.56 0 11.345 0.347 11.899 0.956 L 18.715 8.454 C 19.203 8.992 19.474 9.692 19.474 10.419 L 19.474 17.079 C 19.474 18.692 18.166 20 16.553 20 L 13.632 20 C 12.556 20 11.684 19.128 11.684 18.053 L 11.684 14.645 C 11.684 13.838 11.031 13.184 10.224 13.184 L 9.25 13.184 C 8.444 13.184 7.79 13.838 7.79 14.645 L 7.79 18.053 C 7.79 19.128 6.918 20 5.842 20 L 2.921 20 C 1.308 20 0 18.692 0 17.079 Z" fill="rgb(0, 0, 0)" height="20px" id="kRZ9c6j26" transform="translate(2.315 2)" width="19.474026636947787px"/></svg>)
Home
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 8.333 0 C 12.937 0 16.667 1.865 16.667 4.167 C 16.667 6.468 12.937 8.333 8.333 8.333 C 3.732 8.333 0 6.468 0 4.167 C 0 1.865 3.732 0 8.333 0 Z M 16.667 10 C 16.667 12.302 12.937 14.167 8.333 14.167 C 3.732 14.167 0 12.302 0 10 L 0 6.667 C 0 8.968 3.732 10.833 8.333 10.833 C 12.937 10.833 16.667 8.968 16.667 6.667 Z M 16.667 15.833 C 16.667 18.135 12.937 20 8.333 20 C 3.732 20 0 18.135 0 15.833 L 0 12.5 C 0 14.802 3.732 16.667 8.333 16.667 C 12.937 16.667 16.667 14.802 16.667 12.5 Z" fill="rgb(0, 0, 0)" height="20px" id="BWrVbcf6K" transform="translate(4 2)" width="16.666666666666742px"/></svg>)
Case Studies
Case Studies Details
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 4.167 C 0 1.865 1.865 0 4.167 0 L 6.667 0 C 7.587 0 8.333 0.746 8.333 1.667 L 8.333 5 C 8.333 6.841 9.826 8.333 11.667 8.333 L 15 8.333 C 15.92 8.333 16.667 9.08 16.667 10 L 16.667 15.833 C 16.667 18.135 14.801 20 12.5 20 L 4.167 20 C 1.865 20 0 18.135 0 15.833 Z M 10.712 0.712 C 10.592 0.592 10.413 0.556 10.257 0.621 C 10.101 0.686 10 0.838 10 1.007 L 10 5 C 10 5.92 10.746 6.667 11.667 6.667 L 15.66 6.667 C 15.829 6.667 15.981 6.565 16.046 6.41 C 16.11 6.254 16.074 6.074 15.955 5.955 Z" fill="rgb(0, 0, 0)" height="20px" id="latM1PKny" transform="translate(4 2)" width="16.666666666666742px"/></svg>)
About
Contact
Core Features:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 4 C 0 1.791 1.791 0 4 0 L 16 0 C 18.209 0 20 1.791 20 4 L 20 16 C 20 18.209 18.209 20 16 20 L 4 20 C 1.791 20 0 18.209 0 16 Z M 4 6 C 4 7.105 4.895 8 6 8 L 14 8 C 15.105 8 16 7.105 16 6 C 16 4.895 15.105 4 14 4 L 6 4 C 4.895 4 4 4.895 4 6 Z M 4 14 C 4 15.105 4.895 16 6 16 L 14 16 C 15.105 16 16 15.105 16 14 C 16 12.895 15.105 12 14 12 L 6 12 C 4.895 12 4 12.895 4 14 Z" fill="transparent" height="20px" id="f377x37wp" transform="translate(2 2)" width="20px"><path d="M 0 4 C 0 1.791 1.791 0 4 0 L 16 0 C 18.209 0 20 1.791 20 4 L 20 16 C 20 18.209 18.209 20 16 20 L 4 20 C 1.791 20 0 18.209 0 16 Z M 4 6 C 4 7.105 4.895 8 6 8 L 14 8 C 15.105 8 16 7.105 16 6 C 16 4.895 15.105 4 14 4 L 6 4 C 4.895 4 4 4.895 4 6 Z M 4 14 C 4 15.105 4.895 16 6 16 L 14 16 C 15.105 16 16 15.105 16 14 C 16 12.895 15.105 12 14 12 L 6 12 C 4.895 12 4 12.895 4 14 Z" fill="rgb(0, 0, 0)" height="20px" id="qr28OAMbL" width="20px"/></g></svg>)
Form
Plugins
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z M 5.091 6.182 C 5.091 5.579 5.579 5.091 6.182 5.091 L 13.818 5.091 C 14.421 5.091 14.909 5.579 14.909 6.182 C 14.909 6.784 14.421 7.273 13.818 7.273 L 11.091 7.273 L 11.091 13.818 C 11.091 14.421 10.602 14.909 10 14.909 C 9.398 14.909 8.909 14.421 8.909 13.818 L 8.909 7.273 L 6.182 7.273 C 5.579 7.273 5.091 6.784 5.091 6.182 Z" fill="transparent" height="20px" id="bx5ZpYXbX" transform="translate(2 2)" width="20px"><path d="M 0 3.636 C 0 1.628 1.628 0 3.636 0 L 16.364 0 C 18.372 0 20 1.628 20 3.636 L 20 16.364 C 20 18.372 18.372 20 16.364 20 L 3.636 20 C 1.628 20 0 18.372 0 16.364 Z" fill="rgb(0, 0, 0)" height="20px" id="IZSi1coWj" width="20px"/><path d="M 0 1.091 C 0 0.488 0.488 0 1.091 0 L 8.727 0 C 9.33 0 9.818 0.488 9.818 1.091 C 9.818 1.693 9.33 2.182 8.727 2.182 L 6 2.182 L 6 8.727 C 6 9.33 5.512 9.818 4.909 9.818 C 4.307 9.818 3.818 9.33 3.818 8.727 L 3.818 2.182 L 1.091 2.182 C 0.488 2.182 0 1.693 0 1.091 Z" fill="rgb(255, 255, 255)" height="9.818181818181817px" id="zORJGudlH" transform="translate(5.091 5.091)" width="9.818181818181817px"/></g></svg>)
Arc
Plugins:
BeforeAndAfter
Code:
NegativeMargin
Effects:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="transparent" height="20px" id="MkEHBXhs0" transform="translate(2 2)" width="20px"><path d="M 4.372 8.198 C 6.303 7.812 7.812 6.303 8.198 4.372 L 8.891 0.909 C 9.133 -0.303 10.867 -0.303 11.109 0.909 L 11.802 4.372 C 12.188 6.303 13.697 7.812 15.628 8.198 L 19.091 8.891 C 20.303 9.133 20.303 10.867 19.091 11.109 L 15.628 11.802 C 13.697 12.188 12.188 13.697 11.802 15.628 L 11.109 19.091 C 10.867 20.303 9.133 20.303 8.891 19.091 L 8.198 15.628 C 7.812 13.697 6.303 12.188 4.372 11.802 L 0.909 11.109 C -0.303 10.867 -0.303 9.133 0.909 8.891 Z" fill="rgb(0, 0, 0)" height="20px" id="TD1Mkd6rR" width="20px"/></g></svg>)
Appear
Scroll
Hover
Text
How to use:
Click the Remix button to open the template in Framer.
Log in to your Framer account if prompted.
Choose a workspace to duplicate the project into your account.
Customize pages, components, and styles directly in the Framer editor.