9 | {children}
10 |
11 | )
12 |
13 | export interface InlineCodeProps {
14 | children: PropsWithChildren
15 | }
16 |
17 | export default Code
18 |
--------------------------------------------------------------------------------
/docs/src/components/CodeBlock.tsx:
--------------------------------------------------------------------------------
1 | import { LucideIcon } from 'lucide-react'
2 | import Prism from 'prismjs'
3 | import { PropsWithChildren, useEffect } from 'react'
4 | import Link from './Link.tsx'
5 |
6 | const CodeBlock = ({
7 | children,
8 | Icon = undefined,
9 | language = 'javascript',
10 | linkHref = '',
11 | linkText = '',
12 | }: PropsWithChildren
26 | {children}
27 |
28 | {linkHref && (
29 | {animation}
11 | ))}
12 | 20 | {children} 21 |
22 | ) 23 | } 24 | 25 | export interface ParagraphProps { 26 | children: PropsWithChildren 27 | className?: string 28 | size?: 'regular' | 'large' | 'small' 29 | } 30 | 31 | export default Paragraph 32 | -------------------------------------------------------------------------------- /docs/src/components/Separator.tsx: -------------------------------------------------------------------------------- 1 | const Separator = () => 2 | 3 | export default Separator 4 | -------------------------------------------------------------------------------- /docs/src/components/Skeleton.tsx: -------------------------------------------------------------------------------- 1 | const Skeleton = ({ width = '200px' }) => { 2 | return ( 3 | 7 | ) 8 | } 9 | export default Skeleton 10 | -------------------------------------------------------------------------------- /docs/src/css/keyframes.css: -------------------------------------------------------------------------------- 1 | @keyframes bounce-bottom { 2 | 0% { 3 | transform: translateY(0); 4 | } 5 | 6 | 40% { 7 | transform: translateY(-3px); 8 | } 9 | 10 | 55% { 11 | transform: translateY(0); 12 | } 13 | 14 | 65% { 15 | transform: translateY(-2px); 16 | } 17 | 18 | 82% { 19 | transform: translateY(0); 20 | } 21 | 22 | 100% { 23 | transform: translateY(0); 24 | } 25 | } 26 | 27 | @keyframes appear { 28 | 0% { 29 | opacity: 0; 30 | transform: scale(0.5); 31 | } 32 | 33 | 40% { 34 | opacity: 1; 35 | transform: scale(1.1); 36 | } 37 | 38 | 60%, 39 | 100% { 40 | opacity: 1; 41 | transform: scale(1); 42 | } 43 | } 44 | 45 | @keyframes scale-to-right { 46 | to { 47 | width: 100%; 48 | } 49 | } 50 | 51 | @keyframes translate-down { 52 | to { 53 | transform: translateY(0); 54 | } 55 | } 56 | 57 | @keyframes translate-up { 58 | from { 59 | transform: translateY(0); 60 | } 61 | to { 62 | transform: translateY(-60%); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /docs/src/css/prism.css: -------------------------------------------------------------------------------- 1 | .function, 2 | .tag, 3 | .atrule { 4 | @apply text-fuchsia-700 dark:text-fuchsia-300; 5 | } 6 | 7 | .literal-property, 8 | .constant, 9 | .string-property, 10 | .attr-value, 11 | .property { 12 | @apply text-sky-700 dark:text-sky-300; 13 | } 14 | 15 | .operator, 16 | .comment { 17 | @apply opacity-60; 18 | } 19 | 20 | .punctuation { 21 | @apply opacity-40; 22 | } 23 | -------------------------------------------------------------------------------- /docs/src/demos/AppearDemo.tsx: -------------------------------------------------------------------------------- 1 | import Code from '../components/Code' 2 | import Skeleton from '../components/Skeleton' 3 | import DemoTriggerLine from './DemoTriggerLine' 4 | import DemoWrapper from './DemoWrapper' 5 | 6 | const skeletonCollection = [ 7 | '96%', 8 | '100%', 9 | '92%', 10 | '100%', 11 | '93%', 12 | '87%', 13 | '55%', 14 | '100%', 15 | '93%', 16 | '87%', 17 | '55%', 18 | ] 19 | 20 | const AppearDemo = () => { 21 | return ( 22 |animate-appear timeline-view
32 | view-timeline/demo
39 | animate-scale-to-right timeline
13 | animate...
15 | timeline/navbar
16 | range-on-exit
17 | scope/navbar
20 | view-timeline/navbar
32 | animate...
27 | timeline
28 | -translate-y-20
29 | no-animations:translate-y-0
30 | timeline before{' '}
14 | animate-translate-down
15 |
16 | animate-translate-down before{' '}
20 | timeline
21 |
22 | animation-timeline
75 | scroll-timeline, view-timeline
79 | animation-range
83 | timeline-scope
87 | timeline utility which defaults to animation-timeline: scroll(y){' '}
97 | and also provides an option to set custom timeline name with a modifier.
98 | timeline to the
104 | progress bar.
105 | timeline-view to this element.
113 | view-timeline/navbar utility sets up the animation timeline, which is then
161 | scoped out of the defining element by scope/navbar. The navigation bar is
162 | controlled by this timeline with the timeline/navbar utility. Utility class{' '}
163 | range-on-exit is set to limit the timeline duration.
164 | no-animations modifier to apply fallback styling in browsers which do
173 | not support scroll-driven animations yet.
174 | translate-down keyframe set and apply it to
26 | an element we want to control by a scroll timeline.
27 | animation property sets the{' '}
33 | animation-timeline: auto unless set otherwise. However, using this plugin and
34 | Tailwind CSS animations ensures that the declaration order is correct.
35 |