component
3D Pin
By Snoweirdo
Details
- SnoweirdoAuthor
- componentType
- $18.00Price
- 2025-09-05Published
- 2026-05-07Updated
- 2025-08-07Added
- BackgroundsCategories
Summary
3D Pin Effect
Description
On hover, the content scales and rotates into a perspective view while a dynamic, glowing "pin" appears from behind, adding a unique and interactive visual flair. Showcase Customization Options General Title : The text displayed on the glowing pin. Link URL : The destination URL for the link. Link Target : Determines if the link is active on the pin only, or on the entire content container as well. Glow Color : The color of the glowing pin and the underline on the title. Glow Intensity : Controls the opacity and brightness of the glow effect (from 0 to 1). Glow Spread : Adjusts the size of the glow's animated circles. Content Padding : The internal spacing around the content inside the container. Content Overflow : Specifies how content is handled if it exceeds the container's boundaries (hidden or visible). Touch Support : Enables or disables the hover animation for touch devices. Z-Index : Controls the stacking order of the component relative to other elements. Title Styling Title Font : Full typographic controls for the pin's title. Show Title Background : A toggle to show or hide the background behind the title. Title Background : The background color for the title. Show Title Border : A toggle to show or hide a border around the title. Title Border Color : The color of the title's border. Title Border Width : The thickness of the title's border. Title Border Radius : The corner radius of the title's background. Show Icon : A toggle to show or hide a link icon next to the title. Icon Position : The icon's placement relative to the title (left or right). Icon Size : The size of the icon. Icon Color : The color of the icon. Animation & Effects Animation Duration : The speed of the hover animation in seconds. Hover Scale : The size of the content container when hovered (from 0.5 to 1.2). Hover Rotation : The angle of the perspective rotation on hover. Shadow Intensity : The opacity of the container's drop shadow. Shadow Blur : The blur radius of the drop shadow. Shadow Color : The color of the drop shadow.
Introduction
3D Pin Effect
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #8259