The widget library for Squarespace is here Learn more

Neon Dark Mode Service Slider (Horizontal Scroll)

lock Export Widget Available with Redesignee Premium

Elevate your service offerings with this Neon Dark Mode Service Slider, designed for modern digital agencies, SaaS platforms, and creative portfolios. This widget moves away from traditional grid layouts, offering a dynamic, horizontal scrolling experience that feels app-like and immersive.

The design utilizes a high-contrast dark theme (#111111) paired with vibrant, editable neon accent colors (Lime, Purple, Cyan) that pop against the background. Each card features bold, uppercase typography for immediate impact, a grayscale image that blooms into full color upon hover, and a sleek SVG arrow indicator.

Technically, this widget is built for performance and engagement. It features CSS Scroll Snap for precise alignment on mobile devices and a custom Drag-to-Scroll JavaScript engine for desktop users, ensuring a tactile, swipe-friendly experience across all devices. A unique Color Sync script automatically updates the card's border and hover effects to match the specific color you choose for the headline, making customization effortless.

Key Features:

  • Horizontal "Drag-to-Scroll" Interface: mimics touch-screen swiping behavior on desktop for a modern, fluid user experience.
  • Dynamic Color Sync: Changing the text color of the headline automatically updates the card's accent border and hover states via smart JavaScript.
  • Interactive Hover Effects: Cards lift slightly, images transition from grayscale to full color, and arrows animate forward to encourage clicks.
  • Full-Card Clickability: Utilizes a smart CSS overlay technique to make the entire card a clickable link without breaking text selectability in the editor.
  • Responsive Mobile Layout: Cards automatically resize and snap into place on smaller screens, ensuring readability and ease of navigation.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.