Scroll hint is an animated button that prompts visitors to scroll.

<terra-scroll-hint inline></terra-scroll-hint>

Usage

The scroll hint is used on feature pages as a reminder to continue down the page. These hints are most useful for immersive modules that take up most of the vertical space of the visitor’s viewport. The scroll hint includes an animated button element that calls attention to it.

The element is clickable and triggers an animated vertical scroll. The page will scroll a distance equal to the current height of the viewport to move the visitor into the next section. If the visitor clicks on the scroll hint, begins scrolling, or clicks anywhere else on the screen, the scroll hint will disappear.

<div style="padding: 2rem;">
    <p>By default, the scroll hint appears in the bottom left after 3 seconds of inactivity.</p>
    <terra-scroll-hint></terra-scroll-hint>
</div>

import TerraScrollHint from '@nasa-terra/components/dist/react/scroll-hint';

const App = () => (
    <p>The scroll hint will appear in the bottom left after 3 seconds of inactivity.</p>
    <TerraScrollHint />
);

Variants and Options

Scroll hints come in 2 color schemes, so they can be used in light and dark modules and pages. The component automatically adapts to the current theme.

Light Background

<div style="background-color: #f5f5f5; padding: 2rem;">
    <h1>Light Background</h1>
    <p>Scroll hint on light background</p>
    <terra-scroll-hint inline></terra-scroll-hint>
</div>

Dark Background

When placing the scroll hint on a dark background, use the dark prop to force dark mode styles for better visibility:

<div style="background-color: #1a1a1a; padding: 2rem; color: white;">
    <h1>Dark Background</h1>
    <p>Scroll hint on dark background with dark prop</p>
    <terra-scroll-hint inline dark></terra-scroll-hint>
</div>

The dark prop forces dark mode styles regardless of system preference, making it perfect for dark background sections even when the user’s system is in light mode.

Behavior

The scroll hint behavior depends on whether it’s inline or fixed:

Inline Position

When the inline prop is set:

• The scroll hint is always visible (no inactivity timer)
• It remains visible regardless of user interaction
• Scrolls the page down by one viewport height when clicked
• Emits a terra-scroll event when clicked

Fixed Position (Default)

When the inline prop is not set (default):

• Appears after a configurable delay of user inactivity (defaults to 3 seconds)
• Once shown, remains visible until the user:
  • Clicks on the scroll hint (triggers scroll)
  • Begins scrolling the page
  • Clicks anywhere else on the page
  • Scrolls to the bottom of the page (hint will not show again)
• Scrolls the page down by one viewport height when clicked
• Emits a terra-scroll event when clicked

Positioning

By default, the scroll hint is positioned fixed in the bottom left corner of the viewport. Use the inline prop to position it inline in the DOM flow instead.

Fixed Position (Default)

<div style="height: 200vh; padding: 2rem;">
    <h1>Fixed position (default)</h1>
    <p>The scroll hint appears in the bottom left corner of the viewport.</p>
    <terra-scroll-hint inactivity-delay="2000"></terra-scroll-hint>
</div>

Inline Position

<div style="height: 200vh; padding: 2rem;">
    <h1>Inline position</h1>
    <p>The scroll hint appears inline where it's placed in the DOM.</p>
    <terra-scroll-hint inline inactivity-delay="2000"></terra-scroll-hint>
    <p>Content continues after the scroll hint.</p>
</div>

Configuration

Dark Mode

Use the dark prop to force dark mode styles when placing the scroll hint on a dark background, regardless of system preference:

<div style="background-color: #1a1a1a; padding: 2rem; color: white;">
    <h1>Forced Dark Mode</h1>
    <p>This scroll hint uses dark mode styles even if your system is in light mode.</p>
    <terra-scroll-hint inline dark></terra-scroll-hint>
</div>

import TerraScrollHint from '@nasa-terra/components/dist/react/scroll-hint';

const App = () => (
    <div style={{ backgroundColor: '#1a1a1a', padding: '2rem', color: 'white' }}>
        <TerraScrollHint inline dark />
    </div>
);

Inactivity Delay

Use the inactivityDelay prop (in milliseconds) to configure how long to wait before showing the scroll hint:

<div style="height: 200vh; padding: 2rem;">
    <h1>Custom delay (5 seconds)</h1>
    <p>This scroll hint appears after 5 seconds of inactivity.</p>
    <terra-scroll-hint inactivity-delay="5000"></terra-scroll-hint>
</div>

import TerraScrollHint from '@nasa-terra/components/dist/react/scroll-hint';

const App = () => (
    <div style={{ height: '200vh', padding: '2rem' }}>
        <h1>Custom delay</h1>
        <TerraScrollHint inactivityDelay={5000} />
    </div>
);

Customization

You can customize the scroll hint appearance using CSS custom properties:

terra-scroll-hint {
    --terra-scroll-hint-icon-background-color: var(--terra-color-carbon-black);
    --terra-scroll-hint-icon-color: var(--terra-color-spacesuit-white);
    --terra-scroll-hint-text-color: var(--terra-color-carbon-black);
    --terra-scroll-hint-ring-color: var(--terra-color-nasa-red);
}

Design Tokens

The following design tokens are available for customization:

• --terra-scroll-hint-icon-background-color: Background color of the icon circle (default: --terra-color-carbon-black in light mode, --terra-color-spacesuit-white in dark mode)
• --terra-scroll-hint-icon-color: Color of the chevron icon (default: --terra-color-spacesuit-white in light mode, --terra-color-carbon-black in dark mode)
• --terra-scroll-hint-text-color: Color of the “SCROLL TO CONTINUE” text (default: --terra-color-carbon-black in light mode, --terra-color-spacesuit-white in dark mode)
• --terra-scroll-hint-ring-color: Color of the pulsing ring (default: --terra-color-nasa-red)

All tokens automatically adapt to dark mode when dark mode is active (via system preference or the dark prop).

Animation

The defining element of the scroll hint is the ring around its arrow icon, which rhythmically expands and contracts for a subtle yet eye-catching animation. The animation respects prefers-reduced-motion and will be disabled for users who prefer reduced motion.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/scroll-hint/scroll-hint.js"></script>

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/scroll-hint/scroll-hint.js';

import '@nasa-terra/components/dist/components/scroll-hint/scroll-hint.js';

import TerraScrollHint from '@nasa-terra/components/dist/react/scroll-hint';

Properties

Learn more about attributes and properties.

Events

Learn more about events.

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <terra-icon>