# Focus Scroll — Depth-of-Field Scrolling List for React Native & Expo

> A scrolling list where only the item on the focal line is sharp: the rest blur, shrink, dim and lean away like a camera's depth of field. Karaoke lyrics with a sweeping fill, stories, timelines. One Skia canvas, real blur on iOS, Android and the web, 60 fps.

- Kind: Mobile component (Lists)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: list, effect, react-native, expo, skia, reanimated, blur, scroll
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/focus-scroll-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Focus Scroll is a list with a lens. The item on the focal line is crisp; everything above and below it softens as it moves away — real blur, a gentle shrink, a dim, a slight lean back — so the eye always knows where to read. It's the effect behind karaoke lyrics, year-in-review stories and calm, cinematic reading screens.

- **Real depth of field.** Blur, scale, opacity and tilt follow an eased curve on both sides of the focal line, each tunable above and below.
- **Karaoke built in.** `FocusParagraph` sweeps a fill through the lines with a soft edge, and `useAutoAdvance` steps the list along a timeline — with "back to now" when someone scrolls away.
- **Any Skia content.** Text, shapes, gradients and pictures, in items of any height.
- **Feels physical.** A drag follows from the first pixel, flings keep their speed and land on an item, and a light haptic marks each new focus.
- **Mouse, wheel and keyboard on the web**, screen-reader rows for every item, and reduced-motion support.
- **Fast.** One canvas, nothing re-renders while you scroll, blur programs warmed up in advance: 60 fps in the browser on integrated graphics.

Three complete demos: a now-playing lyrics screen, a year-in-review story and a day timeline — each in light and dark.