Mountain Footer with Dithered Ridges

Backgrounds 296

About

Mountain footer over a range of ridges printed in ordered dither: six ridges recede into drifting valley mist and dissolve upward into the paper, while the brand, tagline, socials and link columns sit in a hairline frame above. On arrival the range develops like a print in the tray, and the pointer parts the mist. Presets and colours, honours reduced motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mountain Footer with Dithered Ridges to your project and fits it to your theme.

Code

How Mountain Footer with Dithered Ridges is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import RidgelineDitherFooter from "@/components/ui/ridgeline-dither-footer"

export default function DemoGlacier() {
  return (
    <div className="w-full">
      <RidgelineDitherFooter
        preset="glacier"
        seed={23}
        ridges={7}
        name="Northwall"
        tagline="Expedition planning for teams who go further — routes, permits and weather in one place."
        columns={[
          { title: "Plan", links: [{ label: "Routes" }, { label: "Forecasts", badge: "New" }, { label: "Permits" }] },
          { title: "Guides", links: [{ label: "Field notes" }, { label: "Gear lists" }, { label: "Safety" }] },
          { title: "Company", links: [{ label: "About" }, { label: "Press" }, { label: "Contact" }] },
        ]}
        socials={[
          { icon: "instagram", href: "https://instagram.com" },
          { icon: "youtube", href: "https://youtube.com" },
          { icon: "github", href: "https://github.com" },
        ]}
        credit={{ label: "Basecamp Studio", href: "#" }}
      />
    </div>
  )
}