Skip to main content
The Socials component displays a row of social media icons for Geometry Dash community platforms with sophisticated hover animations.

​
Features

  • Six social platform links (YouTube, Twitter/X, Facebook, Discord, Reddit, Twitch)
  • Animated hover effects with translation and glow
  • Gradient underline animation on hover
  • Custom styling with scoped CSS
  • Responsive layout

​
Usage

src/pages/index.astro
---
import Socials from "../components/Socials.astro";
---

<Socials />

​
Component Code

src/components/Socials.astro
<section>
  <div>
    <div class="container">
      <div class="text-center d-flex justify-content-center align-items-center mt-3">
        <a href="https://www.youtube.com/channel/UCz_yk8mDSAnxJq0ar66L4sw" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="https://www.robtopgames.com/Images/gj_ytIcon_001.png"
          />
        </a>
        <a href="https://x.com/robtopgames" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="/assets/img/gj_twIcon_001.png"
          />
        </a>
        <a href="https://www.facebook.com/geometrydash" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="https://www.robtopgames.com/Images/gj_fbIcon_001.png"
          />
        </a>
        <a href="https://discord.com/invite/geometrydash" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="https://www.robtopgames.com/Images/gj_discordIcon_001.png"
          />
        </a>
        <a href="https://www.reddit.com/r/geometrydash/" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="https://www.robtopgames.com/Images/gj_rdIcon_001.png"
          />
        </a>
        <a href="https://www.twitch.tv/directory/category/geometry-dash" 
           target="_blank" 
           class="social-icon">
          <img
            width="50"
            height="48"
            src="https://www.robtopgames.com/Images/gj_twitchIcon_001.png"
          />
        </a>
      </div>
    </div>
  </div>
</section>

​
Social Platforms

The component includes links to six community platforms:
PlatformURLIcon
YouTubehttps://www.youtube.com/channel/UCz_yk8mDSAnxJq0ar66L4swgj_ytIcon_001.png
Twitter/Xhttps://x.com/robtopgamesgj_twIcon_001.png
Facebookhttps://www.facebook.com/geometrydashgj_fbIcon_001.png
Discordhttps://discord.com/invite/geometrydashgj_discordIcon_001.png
Reddithttps://www.reddit.com/r/geometrydash/gj_rdIcon_001.png
Twitchhttps://www.twitch.tv/directory/category/geometry-dashgj_twitchIcon_001.png

​
Hover Animation Effects

The component features sophisticated hover animations:

​
Icon Lift and Glow

.social-icon img {
  transition: transform 0.3s ease;
}

.social-icon:hover img {
  transform: translateY(-5px);
  filter: drop-shadow(0 5px 15px rgba(2, 129, 198, 0.4));
}
On hover:
  • Icon moves up 5px
  • Blue glow effect appears

​
Gradient Underline

.social-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0281C6, transparent);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.social-icon:hover::after {
  transform: scaleX(1);
}
On hover:
  • Animated gradient line appears below icon
  • Scales from 0 to full width

​
Styling Features

​
Base Social Icon Styling

.social-icon {
  margin: 0 0.5rem;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

​
Spacing

  • Horizontal margin: 0.5rem (8px) between icons
  • Icons are horizontally centered using flexbox

​
Customization

​
Adding New Platform

To add a new social platform:
src/components/Socials.astro
<div class="text-center d-flex justify-content-center align-items-center mt-3">
  <!-- Existing icons -->
  
  <a href="YOUR_PLATFORM_URL" 
     target="_blank" 
     class="social-icon">
    <img
      width="50"
      height="48"
      src="/path/to/icon.png"
      alt="Platform Name"
    />
  </a>
</div>

​
Customizing Hover Colors

To change the glow color: 
.social-icon:hover img {
  transform: translateY(-5px);
  filter: drop-shadow(0 5px 15px rgba(YOUR_R, YOUR_G, YOUR_B, 0.4));
}
To change the underline gradient: 
.social-icon::after {
  background: linear-gradient(90deg, transparent, #YOUR_COLOR, transparent);
}

​
Making it Dynamic

To accept custom social links as props:
src/components/Socials.astro
---
interface SocialLink {
  name: string;
  url: string;
  icon: string;
}

interface Props {
  links?: SocialLink[];
}

const defaultLinks: SocialLink[] = [
  { 
    name: 'YouTube', 
    url: 'https://www.youtube.com/channel/UCz_yk8mDSAnxJq0ar66L4sw',
    icon: 'https://www.robtopgames.com/Images/gj_ytIcon_001.png'
  },
  // ... other platforms
];

const { links = defaultLinks } = Astro.props;
---

<section>
  <div>
    <div class="container">
      <div class="text-center d-flex justify-content-center align-items-center mt-3">
        {links.map((link) => (
          <a href={link.url} 
             target="_blank" 
             class="social-icon"
             aria-label={link.name}>
            <img
              width="50"
              height="48"
              src={link.icon}
              alt={link.name}
            />
          </a>
        ))}
      </div>
    </div>
  </div>
</section>

​
Accessibility

Recommended enhancements: 
<a href="https://www.youtube.com/channel/UCz_yk8mDSAnxJq0ar66L4sw" 
   target="_blank"
   rel="noopener noreferrer"
   class="social-icon"
   aria-label="Visit RobTop Games on YouTube">
  <img
    width="50"
    height="48"
    src="https://www.robtopgames.com/Images/gj_ytIcon_001.png"
    alt="YouTube"
  />
</a>
  • Footer - Site footer with social links
  • Apps - Download links for app stores

Build docs developers (and LLMs) love

Get started for freeTalk to us