Scroll Journey Line

superdesignCC0-1.0Prompt onlyLanding · landingLight · lightMedium · mediumBlue · blueVivid · vividSerif · serifGeneral · generalProfessional · professional

An SVG line connector that animates/draws itself based on the user's scroll percentage using Framer Motion. Category: Animations & Backgrounds. Prompt author listed upstream: Jason Zhou.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Scroll Journey Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/scroll-journey-line · 6c6090694520 · © Superdesign

Prompt

Animate an SVG line (like a connector or 'journey' line) that draws itself forward based on the user's scroll percentage.

---
"Scroll Journey Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Scroll Journey Line. \"Scroll Journey Line\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-scroll-journey-line",
      "license": "CC0-1.0",
      "attribution": "\"Scroll Journey Line\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "card": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "primary": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#e3e1df"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "accent": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e8e6e3"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6b6a68"
    },
    "border": {
      "$type": "color",
      "$value": "#d4d3d0"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1d4ed8"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Scroll Journey Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520. */
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Scroll Journey Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520. */
/** Tailwind theme extend for Scroll Journey Line (superdesign-scroll-journey-line) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f7f5f2",
        "foreground": "#1c1917",
        "card": "#f7f5f2",
        "primary": "#1d4ed8",
        "primary-foreground": "#fafaf9",
        "secondary": "#e3e1df",
        "accent": "#1d4ed8",
        "muted": "#e8e6e3",
        "border": "#d4d3d0",
        "destructive": "#dc2626",
        "ring": "#1d4ed8"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Scroll Journey Line" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/scroll-journey-line @ 6c6090694520. */
@layer base {
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}