Hover Tilt Wrapper Component - For Framer

✨ Live Preview: https://schemetastic-hover-tilt-wrapper.framer.website/

Component Properties

Features

• You can use it with text, images and connecting instances
• Text supports different HTML tags (span, p, h1...)
• Text supports line breaks
• You can connect multiple instances and display different ones across breakpoints (see image below)
• You can choose X, Y, or both axis to tilt the element
• Support for glare effect
• Glare supports different blend mode
• Multiple easing values
• Glare supports blending modes

How instance connection works

This feature allows you to connect multiple elements and choose which one to display (See the props image above), it is primarily made so you can have different variants across breakpoints.

One limitation this feature has, is that when used inside a component (for example, let's say that you are building a tabs component and changing the children between variants), in specific situations it will not render properly, this is apparently caused due to a bug (not the component itself), but it is already reported, when the bug be fixed I'll change this paragraph, click here for more information. Other than that, it works pretty fine when used across breakpoints.

Credits

This component was built with the help of react-tilty.

Support

support@schemetastic.com

License (One Time Purchase - Multiple Use):

In short: you can use it in personal or commercial projects, include it in client websites and charge them. But don't sell it or offer it for free on a website.

This is a non-exclusive license.

After you purchase this item, you can:

copy, modify, redistribute, publicly perform and display this component on personal or commercial projects for you or for clients, as long as you don't:

• Redistribute this component publicly. This means, don't sell it by itself or modified, don't sell subscriptions for its use, don't offer access to it on a public website.

The above statement doesn't limit you to redistribute and/or charge (or not) a client for it, if you include this component on their website.

Termination: On the approval of a refund for the purchase, when you receive the refund, this license shall automatically terminate.

No Waiver: nothing in this license shall indicate that the author is waving or transferring any right to any consumer of the product.

Applicability: This license doesn't cover third party content unless otherwise noted, this license will apply to the maximum extent allowed by applicable law.

Disclaimer: This component is provided “AS-IS”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non- infringement. In no event shall the author(s) (current or previous) be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the component or the use or other dealings in the component. Unless otherwise noted, no person or entity is sponsoring the author or component. The author (current or previous) does not warrant that the component or this license will be completely accurate, error-free, virus-free, and up-to-date.