← Back to Gallery
Obsidian Tactile Share Panel
NavigationCSSDark ModemenuNeomorphism
Live Preview
A premium skeuomorphic social sharing component designed for high-end dark mode interfaces. It leverages complex box-shadow layering to create a sense of physical depth, simulating buttons that are physically recessed or raised from a matte slate surface. The design incorporates SVG noise filters to provide a realistic micro-texture, breaking the digital 'flatness' and giving the component a tangible, obsidian-like feel.
Features
- Multi-layered skeuomorphic shadows (inset and outset)
- SVG Fractal Noise texture for material realism
- Spring-physics animations using Anime.js
- Tactile 'well' input design for URL display
- Responsive grid layout transitioning from 4-column to 2-column
- Interactive feedback for clipboard actions
Uses
- Portfolio project sharing
- Dark-themed SaaS dashboards
- Premium blog post footers
- Digital product landing pages
Benefits
- High perceived value through tactile visual cues
- Enhanced affordance via physical-mimicry
- Optimized for dark-mode eye comfort
- Engaging micro-interactions reduce bounce rates
Techniques Used
CSS linear-gradients, SVG feTurbulence filters, CSS perspective/transforms, box-shadow layering, Anime.js spring physics
Related Elements
Confirm Action
Are you sure you want to proceed?