@lynx-example/lynx-ui-scroll-view 0.0.15 → 0.0.16

package/Basic/index.css

@@ -1,58 +1,13 @@
 @import "@lynx-js/luna-styles/index.css";
 
+@import "../shared/base.css";
+
 .demo-container {
-  background-color: var(--canvas);
-  width: 100%;
-  height: 100%;
   padding-top: 48px;
   padding-bottom: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card {
-  width: 288px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.circle {
-  width: 216px;
-  height: 216px;
-  border-radius: 9999px;
-  background-color: var(--canvas);
-  padding-bottom: 45px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-}
-
-.letter {
-  font-size: 96px;
-  font-weight: 600;
-  line-height: 96px;
-  color: var(--primary);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--content);
-  margin-top: 4px;
-}
-
-.subtitle {
-  font-size: 10px;
-  color: var(--content-subtle);
-  margin-top: 1px;
 }
 
 .scroll-view {
-  width: 100%;
   height: 472px;
 }
 

package/Basic/index.tsx

@@ -6,7 +6,7 @@ import { root } from '@lynx-js/react'
 
 import { ScrollView } from '@lynx-js/lynx-ui'
 
-import { CircleLetterCard } from './CircleLetterCard'
+import { CircleCard } from '../shared/CircleCard'
 import './index.css'
 
 const LETTERS = ['L', 'Y', 'N', 'X', 'U', 'I', 'L', 'Y', 'N', 'X', 'J', 'S']
@@ -17,7 +17,12 @@ function App() {
       <ScrollView scrollOrientation='horizontal' className='scroll-view'>
         <view className='scroll-view-content'>
           {LETTERS.map((letter, i) => (
-            <CircleLetterCard letter={letter} key={`circle-${i}`} />
+            <CircleCard
+              letter={letter}
+              title='ScrollView'
+              subtitle='@lynx-js/lynx-ui'
+              key={`circle-${i}`}
+            />
           ))}
         </view>
       </ScrollView>

package/Bounces/index.css

@@ -0,0 +1,36 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../shared/base.css";
+
+.demo-container {
+  padding-top: 48px;
+  padding-bottom: 24px;
+}
+
+.demo-scroll-region {
+  width: 100%;
+  height: 472px;
+  display: flex;
+  align-items: center;
+  background-color: var(--canvas-ambient);
+}
+
+.scroll-view {
+  height: 100%;
+}
+
+.scroll-view-content {
+  width: max-content;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-left: 40px;
+  padding-right: 40px;
+  background: linear-gradient(
+    90deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}

package/Bounces/index.tsx

@@ -0,0 +1,61 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+
+import { BounceTag } from '../shared/BounceTag'
+import { CircleCard } from '../shared/CircleCard'
+import './index.css'
+
+const LETTERS = [
+  'L',
+  'Y',
+  'N',
+  'X',
+  'L',
+  'T',
+  'R',
+  'B',
+  'O',
+  'U',
+  'N',
+  'C',
+  'E',
+]
+
+function App() {
+  return (
+    <view className='demo-container lunaris-dark'>
+      <view className='demo-scroll-region'>
+        <ScrollView
+          scrollOrientation='horizontal'
+          className='scroll-view'
+          bounceableOptions={{
+            enableBounces: true,
+            alwaysBouncing: true,
+            upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
+            lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
+          }}
+        >
+          <view className='scroll-view-content'>
+            {LETTERS.map((letter, index) => (
+              <CircleCard
+                letter={letter}
+                title='ScrollView Bounces'
+                subtitle='@lynx-js/lynx-ui'
+                key={`${letter}-${index}`}
+              />
+            ))}
+          </view>
+        </ScrollView>
+      </view>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/BouncesRTL/index.css

@@ -0,0 +1,41 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../shared/base.css";
+
+.demo-container {
+  padding-top: 48px;
+  padding-bottom: 24px;
+}
+
+.demo-scroll-region {
+  width: 100%;
+  height: 472px;
+  display: flex;
+  align-items: center;
+  background-color: var(--canvas-ambient);
+}
+
+.rtl-scope {
+  direction: rtl;
+}
+
+.scroll-view {
+  height: 100%;
+}
+
+.scroll-view-content {
+  width: max-content;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-left: 40px;
+  padding-right: 40px;
+  direction: inherit;
+  background: linear-gradient(
+    270deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}

package/BouncesRTL/index.tsx

@@ -0,0 +1,63 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+
+import { BounceTag } from '../shared/BounceTag'
+import { CircleCard } from '../shared/CircleCard'
+import './index.css'
+
+const LETTERS = [
+  'L',
+  'Y',
+  'N',
+  'X',
+  'R',
+  'T',
+  'L',
+  'B',
+  'O',
+  'U',
+  'N',
+  'C',
+  'E',
+]
+
+function App() {
+  return (
+    <view className='demo-container lunaris-dark rtl-scope'>
+      <view className='demo-scroll-region'>
+        <ScrollView
+          scrollOrientation='horizontal'
+          enableRTL={true}
+          className='scroll-view'
+          bounceableOptions={{
+            enableBounces: true,
+            alwaysBouncing: true,
+            upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
+            lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
+          }}
+        >
+          <view className='scroll-view-content'>
+            {LETTERS.map((letter, index) => (
+              <CircleCard
+                letter={letter}
+                title='Bounces RTL'
+                subtitle='@lynx-js/lynx-ui'
+                subtitleDirection='ltr'
+                key={`${letter}-${index}`}
+              />
+            ))}
+          </view>
+        </ScrollView>
+      </view>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lynx-example/lynx-ui-scroll-view
 
+## 0.0.16
+
+### Patch Changes
+
+- Rename the horizontal bounce demos to Bounces and BouncesRTL, and ([#266](https://github.com/lynx-family/lynx-ui/pull/266))
+  refine ScrollView example layout, gradients, shared primitives, and
+  surface layering to improve bounce demos, button styling, and RTL text
+  behavior.
+- Updated dependencies [[`4214d92`](https://github.com/lynx-family/lynx-ui/commit/4214d923421d0a61ecd0b7cbf9a7a44acaff8d2a)]:
+  - @lynx-js/lynx-ui@3.136.0
+  - @lynx-js/luna-styles@0.2.2
+
 ## 0.0.15
 
 ### Patch Changes

package/ScrollBy/index.css

@@ -3,7 +3,7 @@
 .demo-container {
   width: 100%;
   height: 100%;
-  padding: 32px 20px;
+  padding: 64px 20px 32px;
   background-color: var(--canvas);
 }
 
@@ -17,26 +17,34 @@
 
 .button {
   flex: 1;
-  height: 48px;
-  border-radius: 12px;
+  height: 44px;
+  border-radius: 999px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--canvas-ambient);
+  background-color: var(--neutral);
+}
+
+.button.ui-active {
+  background-color: var(--neutral-2);
 }
 
 .button--primary {
-  background-color: var(--primary);
+  background-color: var(--gradient-a);
+}
+
+.button--primary.ui-active {
+  background-color: var(--gradient-b);
 }
 
 .button-text {
-  color: var(--content);
-  font-size: 15px;
-  font-weight: 600;
+  color: var(--neutral-content);
+  font-size: 14px;
+  font-weight: 700;
 }
 
 .button--primary .button-text {
-  color: var(--canvas);
+  color: var(--gradient-content);
 }
 
 .scroll-view {
@@ -66,13 +74,13 @@
 }
 
 .card-title {
-  color: var(--content);
+  color: var(--gradient-content);
   font-size: 20px;
   font-weight: 700;
 }
 
 .card-subtitle {
   margin-top: 6px;
-  color: var(--content-subtle);
+  color: var(--gradient-content-faded);
   font-size: 13px;
 }

package/ScrollBy/index.tsx

@@ -4,6 +4,8 @@
 
 import { root } from '@lynx-js/react'
 
+import { Button } from '@lynx-js/lynx-ui'
+
 import './index.css'
 
 const ITEMS = Array.from({ length: 24 }, (_, index) => index + 1)
@@ -19,24 +21,28 @@ function App() {
   return (
     <view className='demo-container lunaris-dark'>
       <view className='toolbar'>
-        <view
+        <Button
           className='button'
-          main-thread:bindtap={() => {
-            'main thread'
-            scrollByOffset(-160)
+          buttonProps={{
+            'main-thread:bindtap': () => {
+              'main thread'
+              scrollByOffset(-160)
+            },
           }}
         >
           <text className='button-text'>Scroll Up</text>
-        </view>
-        <view
+        </Button>
+        <Button
           className='button button--primary'
-          main-thread:bindtap={() => {
-            'main thread'
-            scrollByOffset(160)
+          buttonProps={{
+            'main-thread:bindtap': () => {
+              'main thread'
+              scrollByOffset(160)
+            },
           }}
         >
           <text className='button-text'>Scroll Down</text>
-        </view>
+        </Button>
       </view>
 
       <scroll-view

package/ZIndex/data.ts

@@ -0,0 +1,47 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export interface LayerCardData {
+  key: string
+  title: string
+  subtitle: string
+  badge: string
+  surfaceClassName:
+    | 'layer-card--canvas'
+    | 'layer-card--paper'
+    | 'layer-card--paper-clear'
+  raised?: boolean
+}
+
+export const CARDS: LayerCardData[] = [
+  {
+    key: 'card-1',
+    title: 'Canvas Surface',
+    subtitle: 'The first content layer above the canvas-ambient viewport.',
+    badge: 'canvas · z-index: 1',
+    surfaceClassName: 'layer-card--canvas',
+  },
+  {
+    key: 'card-2',
+    title: 'Raised Paper Surface',
+    subtitle: 'The raised badge overlaps neighboring cards while scrolling.',
+    badge: 'paper · z-index: 3',
+    surfaceClassName: 'layer-card--paper',
+    raised: true,
+  },
+  {
+    key: 'card-3',
+    title: 'Paper Surface',
+    subtitle: 'Standard content card sitting under the raised layer.',
+    badge: 'paper · z-index: 1',
+    surfaceClassName: 'layer-card--paper',
+  },
+  {
+    key: 'card-4',
+    title: 'Paper Clear Surface',
+    subtitle: 'A lighter surface variant to compare stacked elevation.',
+    badge: 'paper-clear · z-index: 1',
+    surfaceClassName: 'layer-card--paper-clear',
+  },
+]

package/ZIndex/index.css

@@ -1,24 +1,38 @@
 @import "@lynx-js/luna-styles/index.css";
 
 .demo-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  padding-top: 48px;
-  padding-bottom: 24px;
-  background-color: var(--canvas-ambient);
+  padding: 48px 16px 24px;
+  box-sizing: border-box;
+}
+
+.luna-gradient-rose {
+  background: linear-gradient(
+    0deg,
+    var(--gradient-a),
+    var(--gradient-b)
+  );
 }
 
 .scroll-view {
   width: 100%;
-  height: 520px;
+  height: 560px;
+  padding: 12px;
+  border-radius: 24px;
+  background-color: var(--canvas-ambient);
+  box-sizing: border-box;
 }
 
 .scroll-view-content {
   width: 100%;
   height: 920px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-bottom: 32px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 20px;
   box-sizing: border-box;
 }
 
@@ -31,7 +45,6 @@
   padding-left: 20px;
   padding-right: 20px;
   border-radius: 20px;
-  background-color: var(--canvas);
   border-width: 1px;
   border-color: var(--line);
 }
@@ -44,6 +57,18 @@
   z-index: 2;
 }
 
+.layer-card--canvas {
+  background-color: var(--canvas);
+}
+
+.layer-card--paper {
+  background-color: var(--paper);
+}
+
+.layer-card--paper-clear {
+  background-color: var(--paper-clear);
+}
+
 .layer-card__badge {
   position: absolute;
   top: -18px;
@@ -56,15 +81,20 @@
 
 .layer-card__badge--raised {
   z-index: 3;
-  background-color: var(--primary);
+  background-color: var(--gradient-b);
 }
 
 .layer-card__badge-text {
   font-size: 12px;
   font-weight: 600;
+  line-height: 16px;
   color: var(--neutral-content);
 }
 
+.layer-card__badge--raised .layer-card__badge-text {
+  color: var(--gradient-content);
+}
+
 .layer-card__title {
   font-size: 22px;
   font-weight: 600;

package/ZIndex/index.tsx

@@ -5,38 +5,36 @@
 import { root } from '@lynx-js/react'
 
 import { ScrollView } from '@lynx-js/lynx-ui'
+import { clsx } from 'clsx'
 
+import { CARDS } from './data'
 import './index.css'
 
-const CARDS = [
-  { key: 'card-1', title: 'Base Layer', badge: 'z-index: 1' },
-  { key: 'card-2', title: 'Raised Layer', badge: 'z-index: 3' },
-  { key: 'card-3', title: 'Normal Layer', badge: 'z-index: 1' },
-  { key: 'card-4', title: 'Content Layer', badge: 'z-index: 1' },
-]
-
 function App() {
   return (
-    <view className='demo-container lunaris-dark'>
+    <view className='demo-container lunaris-dark luna-gradient-rose'>
       <ScrollView className='scroll-view'>
         <view className='scroll-view-content'>
-          {CARDS.map((card, index) => (
+          {CARDS.map((card) => (
             <view
-              className={`layer-card ${
-                index === 1 ? 'layer-card--raised' : ''
-              }`}
+              className={clsx(
+                'layer-card',
+                card.surfaceClassName,
+                card.raised && 'layer-card--raised',
+              )}
               key={card.key}
             >
               <view
-                className={`layer-card__badge ${
-                  index === 1 ? 'layer-card__badge--raised' : ''
-                }`}
+                className={clsx(
+                  'layer-card__badge',
+                  card.raised && 'layer-card__badge--raised',
+                )}
               >
                 <text className='layer-card__badge-text'>{card.badge}</text>
               </view>
               <text className='layer-card__title'>{card.title}</text>
               <text className='layer-card__subtitle'>
-                Scroll the list and check the overlapping badge.
+                {card.subtitle}
               </text>
             </view>
           ))}

package/lynx.config.mjs

@@ -6,8 +6,8 @@ import { exampleConfig } from '../../../tools/configs/exampleConfig.mjs'
 
 const defaultConfig = exampleConfig({
   ScrollViewBasic: './Basic/index.tsx',
-  ScrollViewHorizontal: './Horizontal/index.tsx',
-  ScrollViewHorizontalRTL: './HorizontalRTL/index.tsx',
+  ScrollViewBounces: './Bounces/index.tsx',
+  ScrollViewBouncesRTL: './BouncesRTL/index.tsx',
   ScrollViewInnerFlex: './InnerFlex/index.tsx',
   ScrollViewScrollBy: './ScrollBy/index.tsx',
   ScrollViewZIndex: './ZIndex/index.tsx',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-example/lynx-ui-scroll-view",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Example app demonstrating ScrollView usage in lynx-ui",
   "homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView#readme",
   "repository": {
@@ -24,8 +24,9 @@
   ],
   "dependencies": {
     "@lynx-js/react": "0.123.1",
-    "@lynx-js/luna-styles": "0.2.1",
-    "@lynx-js/lynx-ui": "3.135.4"
+    "clsx": "^2.1.1",
+    "@lynx-js/luna-styles": "0.2.2",
+    "@lynx-js/lynx-ui": "3.136.0"
   },
   "devDependencies": {
     "@lynx-js/qrcode-rsbuild-plugin": "0.6.0",

package/shared/BounceTag/index.css

@@ -0,0 +1,37 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.bounce-tag {
+  padding: 0px 32px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  direction: inherit;
+}
+
+.bounce-tag__surface {
+  min-width: 56px;
+  padding: 16px 16px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.bounce-tag__surface--upper {
+  background-color: var(--gradient-a);
+}
+
+.bounce-tag__surface--lower {
+  background-color: var(--gradient-d);
+}
+
+.bounce-tag__text-line {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  color: var(--gradient-content);
+}

package/shared/BounceTag/index.tsx

@@ -0,0 +1,27 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import './index.css'
+
+interface BounceTagProps {
+  label: string
+  variant: 'upper' | 'lower'
+}
+
+export function BounceTag(props: BounceTagProps) {
+  const { label, variant } = props
+  const lines = label.split(' ')
+
+  return (
+    <view className='bounce-tag'>
+      <view className={`bounce-tag__surface bounce-tag__surface--${variant}`}>
+        {lines.map((line, index) => (
+          <text className='bounce-tag__text-line' key={`${line}-${index}`}>
+            {line}
+          </text>
+        ))}
+      </view>
+    </view>
+  )
+}

package/shared/CircleCard/index.css

@@ -0,0 +1,7 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../base.css";
+
+.subtitle--ltr {
+  direction: ltr;
+}

package/shared/CircleCard/index.tsx

@@ -0,0 +1,35 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import './index.css'
+
+import { clsx } from 'clsx'
+
+interface CircleCardProps {
+  letter: string
+  title: string
+  subtitle: string
+  subtitleDirection?: 'inherit' | 'ltr'
+}
+
+export function CircleCard(props: CircleCardProps) {
+  const { letter, title, subtitle, subtitleDirection = 'inherit' } = props
+
+  return (
+    <view className='card'>
+      <view className='circle'>
+        <text className='letter'>{letter}</text>
+        <text className='title'>{title}</text>
+        <text
+          className={clsx(
+            'subtitle',
+            subtitleDirection === 'ltr' && 'subtitle--ltr',
+          )}
+        >
+          {subtitle}
+        </text>
+      </view>
+    </view>
+  )
+}

package/{HorizontalRTL/index.css → shared/base.css}

@@ -1,43 +1,20 @@
 @import "@lynx-js/luna-styles/index.css";
 
 .demo-container {
+  background-color: var(--canvas);
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--canvas);
-}
-
-.rtl-scope {
-  direction: rtl;
+  box-sizing: border-box;
 }
 
 .scroll-view {
   width: 100%;
-  height: 472px;
   direction: inherit;
 }
 
-.scroll-view-content {
-  width: max-content;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  gap: 20px;
-  direction: inherit;
-  background: linear-gradient(
-    90deg,
-    var(--gradient-a),
-    var(--gradient-b),
-    var(--gradient-c),
-    var(--gradient-d)
-  );
-}
-
 .card {
   width: 288px;
   height: 100%;
@@ -80,32 +57,3 @@
   color: var(--content-subtle);
   margin-top: 1px;
 }
-
-.bounce-slot {
-  width: 96px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  direction: inherit;
-}
-
-.bounce-slot__text {
-  min-width: 56px;
-  padding: 16px 12px;
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  background-color: var(--primary);
-}
-
-.bounce-slot__line {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  color: var(--gradient-content);
-}

package/Basic/CircleLetterCard.tsx

@@ -1,23 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import type { ReactNode } from '@lynx-js/react'
-import './index.css'
-
-interface CircleLetterCardProps {
-  letter: string
-}
-
-export const CircleLetterCard = (props: CircleLetterCardProps): ReactNode => {
-  const { letter } = props
-  return (
-    <view className='card'>
-      <view className='circle'>
-        <text className='letter'>{letter}</text>
-        <text className='title'>ScrollView</text>
-        <text className='subtitle'>@lynx-js/lynx-ui</text>
-      </view>
-    </view>
-  )
-}

package/Horizontal/index.css

@@ -1,110 +0,0 @@
-@import "@lynx-js/luna-styles/index.css";
-
-.demo-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--canvas);
-}
-
-.scroll-view {
-  width: 100%;
-  height: 472px;
-}
-
-.scroll-view-content {
-  width: max-content;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  gap: 20px;
-  background: linear-gradient(
-    90deg,
-    var(--gradient-a),
-    var(--gradient-b),
-    var(--gradient-c),
-    var(--gradient-d)
-  );
-}
-
-.card {
-  width: 288px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.circle {
-  width: 216px;
-  height: 216px;
-  border-radius: 9999px;
-  background-color: var(--canvas);
-  padding-bottom: 45px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-}
-
-.letter {
-  font-size: 96px;
-  font-weight: 600;
-  line-height: 96px;
-  color: var(--primary);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--content);
-  margin-top: 4px;
-}
-
-.subtitle {
-  font-size: 10px;
-  color: var(--content-subtle);
-  margin-top: 1px;
-}
-
-.bounce-slot {
-  width: 96px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.bounce-slot__text {
-  min-width: 56px;
-  padding: 16px 12px;
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  background-color: var(--primary);
-}
-
-.bounce-slot__text--upper {
-  background-color: var(--primary);
-}
-
-.bounce-slot__text--lower {
-  background-color: var(--primary-2);
-}
-
-.bounce-slot__line {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  color: var(--gradient-content);
-}

package/Horizontal/index.tsx

@@ -1,75 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import { root } from '@lynx-js/react'
-
-import { ScrollView } from '@lynx-js/lynx-ui'
-
-import './index.css'
-
-const LETTERS = [
-  'L',
-  'Y',
-  'N',
-  'X',
-  'L',
-  'T',
-  'R',
-  'B',
-  'O',
-  'U',
-  'N',
-  'C',
-  'E',
-]
-
-function BounceTag(props: { label: string, variant: 'upper' | 'lower' }) {
-  const { label, variant } = props
-  const lines = label.split(' ')
-
-  return (
-    <view className='bounce-slot'>
-      <view className={`bounce-slot__text bounce-slot__text--${variant}`}>
-        {lines.map((line, index) => (
-          <text className='bounce-slot__line' key={`${line}-${index}`}>
-            {line}
-          </text>
-        ))}
-      </view>
-    </view>
-  )
-}
-
-function App() {
-  return (
-    <view className='demo-container lunaris-dark'>
-      <ScrollView
-        scrollOrientation='horizontal'
-        className='scroll-view'
-        bounceableOptions={{
-          enableBounces: true,
-          alwaysBouncing: true,
-          upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
-          lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
-        }}
-      >
-        <view className='scroll-view-content'>
-          {LETTERS.map((letter, index) => (
-            <view className='card' key={`${letter}-${index}`}>
-              <view className='circle'>
-                <text className='letter'>{letter}</text>
-                <text className='title'>ScrollView Horizontal</text>
-                <text className='subtitle'>direction: ltr + useBounce</text>
-              </view>
-            </view>
-          ))}
-        </view>
-      </ScrollView>
-    </view>
-  )
-}
-
-root.render(<App />)
-
-export default App

package/HorizontalRTL/index.tsx

@@ -1,76 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import { root } from '@lynx-js/react'
-
-import { ScrollView } from '@lynx-js/lynx-ui'
-
-import './index.css'
-
-const LETTERS = [
-  'L',
-  'Y',
-  'N',
-  'X',
-  'R',
-  'T',
-  'L',
-  'B',
-  'O',
-  'U',
-  'N',
-  'C',
-  'E',
-]
-
-function BounceTag(props: { label: string }) {
-  const { label } = props
-  const lines = label.split(' ')
-
-  return (
-    <view className='bounce-slot'>
-      <view className='bounce-slot__text'>
-        {lines.map((line, index) => (
-          <text className='bounce-slot__line' key={`${line}-${index}`}>
-            {line}
-          </text>
-        ))}
-      </view>
-    </view>
-  )
-}
-
-function App() {
-  return (
-    <view className='demo-container lunaris-dark rtl-scope'>
-      <ScrollView
-        scrollOrientation='horizontal'
-        enableRTL={true}
-        className='scroll-view'
-        bounceableOptions={{
-          enableBounces: true,
-          alwaysBouncing: true,
-          upperBounceItem: <BounceTag label='Start Bounce' />,
-          lowerBounceItem: <BounceTag label='End Bounce' />,
-        }}
-      >
-        <view className='scroll-view-content'>
-          {LETTERS.map((letter, index) => (
-            <view className='card' key={`${letter}-${index}`}>
-              <view className='circle'>
-                <text className='letter'>{letter}</text>
-                <text className='title'>ScrollView RTL</text>
-                <text className='subtitle'>direction: rtl + useBounce</text>
-              </view>
-            </view>
-          ))}
-        </view>
-      </ScrollView>
-    </view>
-  )
-}
-
-root.render(<App />)
-
-export default App