Scroll Island

Renders a floating scroll island with progress, actions, and indicators. It shows scroll progress and allows navigation through topics. It appears as a fixed UI element during scrolling. Use it to provide interactive navigation in long content sections.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/scroll-island

npx layro-cli add @watermeloncorp/scroll-island

npx layro-cli add @watermeloncorp/scroll-island

bunx layro-cli add @watermeloncorp/scroll-island

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { AnimatePresence, motion, MotionConfig } from 'motion/react';
import { ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import useMeasure from 'react-use-measure';

export interface Topic {
  id: string;
  title: string;
  content: string;
}