Social Flip
AI Pass+social#icons#flip#animation
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Social component
About Social Flip
Square social icon buttons with a 3D flip animation on hover — each icon sits in a rounded-square button that inverts its background and rotates the icon 360 degrees via a rotateY transform, fully token-driven and design-system agnostic.
Features
- Four square icon buttons for Instagram, X, Threads, and LinkedIn using Tabler icons
- On hover each button inverts its background and icon color with a smooth transition
- Icon performs a full 360-degree rotateY flip on hover for a 3D effect
- All colors driven by CSS custom properties for full design-system compatibility
- Responsive layout with flex-wrap for narrow viewports
Accessibility
- ARIA labels
- All icon buttons have
aria-label - Button group
role="group"witharia-labelon button container- Theme toggle
role="switch"witharia-checked, Enter/Space activation- Focus indicators
:focus-visiblewith--ringoutline on all elements- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Social Flip in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the social is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Social Icons
VanillaReact
Circle social icon buttons with outline ring and brand color hover fill — each icon sits inside a circular button with a subtle border ring that expands on hover while the background fills with the platform's brand color, fully token-driven and design-system agnostic.
#social#icons
Social Tooltip
VanillaReact
Circle social icon buttons with floating tooltip popups on hover and brand color fill — five platform icons (Facebook, GitHub, Instagram, LinkedIn, X) in neutral circles with shadow, each revealing a brand-matched tooltip with bounce easing on hover.
#social#tooltip
Radial Share
ReactVanilla
A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.
#social#radial
Modal — Aperture
VanillaReact
An accessible observatory-style dialog that opens through an animated circular aperture, with keyboard support and light and dark themes.
#modal#dialog#animation
Modal — Bottom Sheet
VanillaReact
An accessible mobile-app bottom sheet that springs up from the bottom edge with a grab handle, an amount summary, and list-rows instead of a paragraph — a fintech payment-confirmation sheet themed by the Neovault design system (inspired by Revolut), with a full-width pill CTA and full keyboard.
#modal#dialog#animation
Flip Card
ReactVanilla
A 3D flip credit card. The front shows an embossed number, an EMV chip, a contactless glyph and duo-tone network marks; clicking or pressing Enter rotates it on the Y axis to reveal the magnetic stripe, an Allura signature panel and the CCV.
#payment#flip#3d
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
