lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
353 lines (352 loc) • 18.8 kB
TypeScript
import React, { ReactNode } from "react";
import { HTMLMotionProps } from "framer-motion";
export interface VideoTextProps {
src: string;
className?: string;
autoPlay?: boolean;
muted?: boolean;
loop?: boolean;
preload?: "auto" | "metadata" | "none";
children: ReactNode;
fontSize?: string | number;
fontWeight?: string | number;
textAnchor?: string;
dominantBaseline?: string;
fontFamily?: string;
as?: "div" | "span" | "section" | "article" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}
export declare function VideoText({ src, children, className, autoPlay, muted, loop, preload, fontSize, fontWeight, textAnchor, dominantBaseline, fontFamily, as, ...motionProps }: VideoTextProps & HTMLMotionProps<"div">): React.FunctionComponentElement<{
id?: string;
ref?: React.LegacyRef<HTMLDivElement>;
defaultChecked?: boolean;
defaultValue?: string | number | readonly string[];
suppressContentEditableWarning?: boolean;
suppressHydrationWarning?: boolean;
accessKey?: string;
autoCapitalize?: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
autoFocus?: boolean;
contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only";
contextMenu?: string;
dir?: string;
draggable?: boolean | "true" | "false";
enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send";
hidden?: boolean;
lang?: string;
nonce?: string;
slot?: string;
spellCheck?: boolean | "true" | "false";
tabIndex?: number;
title?: string;
translate?: "yes" | "no";
radioGroup?: string;
role?: React.AriaRole;
about?: string;
content?: string;
datatype?: string;
inlist?: any;
prefix?: string;
property?: string;
rel?: string;
resource?: string;
rev?: string;
typeof?: string;
vocab?: string;
autoCorrect?: string;
autoSave?: string;
color?: string;
itemProp?: string;
itemScope?: boolean;
itemType?: string;
itemID?: string;
itemRef?: string;
results?: number;
security?: string;
unselectable?: "off" | "on";
inputMode?: "decimal" | "numeric" | "none" | "search" | "text" | "url" | "tel" | "email";
is?: string;
exportparts?: string;
part?: string;
"aria-activedescendant"?: string;
"aria-atomic"?: boolean | "true" | "false";
"aria-autocomplete"?: "none" | "list" | "inline" | "both";
"aria-braillelabel"?: string;
"aria-brailleroledescription"?: string;
"aria-busy"?: boolean | "true" | "false";
"aria-checked"?: boolean | "true" | "false" | "mixed";
"aria-colcount"?: number;
"aria-colindex"?: number;
"aria-colindextext"?: string;
"aria-colspan"?: number;
"aria-controls"?: string;
"aria-current"?: boolean | "time" | "page" | "step" | "true" | "false" | "location" | "date";
"aria-describedby"?: string;
"aria-description"?: string;
"aria-details"?: string;
"aria-disabled"?: boolean | "true" | "false";
"aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup";
"aria-errormessage"?: string;
"aria-expanded"?: boolean | "true" | "false";
"aria-flowto"?: string;
"aria-grabbed"?: boolean | "true" | "false";
"aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
"aria-hidden"?: boolean | "true" | "false";
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
"aria-keyshortcuts"?: string;
"aria-label"?: string;
"aria-labelledby"?: string;
"aria-level"?: number;
"aria-live"?: "off" | "assertive" | "polite";
"aria-modal"?: boolean | "true" | "false";
"aria-multiline"?: boolean | "true" | "false";
"aria-multiselectable"?: boolean | "true" | "false";
"aria-orientation"?: "horizontal" | "vertical";
"aria-owns"?: string;
"aria-placeholder"?: string;
"aria-posinset"?: number;
"aria-pressed"?: boolean | "true" | "false" | "mixed";
"aria-readonly"?: boolean | "true" | "false";
"aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
"aria-required"?: boolean | "true" | "false";
"aria-roledescription"?: string;
"aria-rowcount"?: number;
"aria-rowindex"?: number;
"aria-rowindextext"?: string;
"aria-rowspan"?: number;
"aria-selected"?: boolean | "true" | "false";
"aria-setsize"?: number;
"aria-sort"?: "none" | "ascending" | "descending" | "other";
"aria-valuemax"?: number;
"aria-valuemin"?: number;
"aria-valuenow"?: number;
"aria-valuetext"?: string;
dangerouslySetInnerHTML?: {
__html: string | TrustedHTML;
};
onCopy?: React.ClipboardEventHandler<HTMLDivElement>;
onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement>;
onCut?: React.ClipboardEventHandler<HTMLDivElement>;
onCutCapture?: React.ClipboardEventHandler<HTMLDivElement>;
onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement>;
onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement>;
onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement>;
onCompositionStart?: React.CompositionEventHandler<HTMLDivElement>;
onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement>;
onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement>;
onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement>;
onFocus?: React.FocusEventHandler<HTMLDivElement>;
onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
onBlur?: React.FocusEventHandler<HTMLDivElement>;
onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
onChange?: React.FormEventHandler<HTMLDivElement>;
onChangeCapture?: React.FormEventHandler<HTMLDivElement>;
onBeforeInput?: React.InputEventHandler<HTMLDivElement>;
onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement>;
onInput?: React.FormEventHandler<HTMLDivElement>;
onInputCapture?: React.FormEventHandler<HTMLDivElement>;
onReset?: React.FormEventHandler<HTMLDivElement>;
onResetCapture?: React.FormEventHandler<HTMLDivElement>;
onSubmit?: React.FormEventHandler<HTMLDivElement>;
onSubmitCapture?: React.FormEventHandler<HTMLDivElement>;
onInvalid?: React.FormEventHandler<HTMLDivElement>;
onInvalidCapture?: React.FormEventHandler<HTMLDivElement>;
onLoad?: React.ReactEventHandler<HTMLDivElement>;
onLoadCapture?: React.ReactEventHandler<HTMLDivElement>;
onError?: React.ReactEventHandler<HTMLDivElement>;
onErrorCapture?: React.ReactEventHandler<HTMLDivElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement>;
onAbort?: React.ReactEventHandler<HTMLDivElement>;
onAbortCapture?: React.ReactEventHandler<HTMLDivElement>;
onCanPlay?: React.ReactEventHandler<HTMLDivElement>;
onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement>;
onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement>;
onDurationChange?: React.ReactEventHandler<HTMLDivElement>;
onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
onEmptied?: React.ReactEventHandler<HTMLDivElement>;
onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement>;
onEncrypted?: React.ReactEventHandler<HTMLDivElement>;
onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement>;
onEnded?: React.ReactEventHandler<HTMLDivElement>;
onEndedCapture?: React.ReactEventHandler<HTMLDivElement>;
onLoadedData?: React.ReactEventHandler<HTMLDivElement>;
onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement>;
onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement>;
onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement>;
onLoadStart?: React.ReactEventHandler<HTMLDivElement>;
onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement>;
onPause?: React.ReactEventHandler<HTMLDivElement>;
onPauseCapture?: React.ReactEventHandler<HTMLDivElement>;
onPlay?: React.ReactEventHandler<HTMLDivElement>;
onPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
onPlaying?: React.ReactEventHandler<HTMLDivElement>;
onPlayingCapture?: React.ReactEventHandler<HTMLDivElement>;
onProgress?: React.ReactEventHandler<HTMLDivElement>;
onProgressCapture?: React.ReactEventHandler<HTMLDivElement>;
onRateChange?: React.ReactEventHandler<HTMLDivElement>;
onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
onSeeked?: React.ReactEventHandler<HTMLDivElement>;
onSeekedCapture?: React.ReactEventHandler<HTMLDivElement>;
onSeeking?: React.ReactEventHandler<HTMLDivElement>;
onSeekingCapture?: React.ReactEventHandler<HTMLDivElement>;
onStalled?: React.ReactEventHandler<HTMLDivElement>;
onStalledCapture?: React.ReactEventHandler<HTMLDivElement>;
onSuspend?: React.ReactEventHandler<HTMLDivElement>;
onSuspendCapture?: React.ReactEventHandler<HTMLDivElement>;
onTimeUpdate?: React.ReactEventHandler<HTMLDivElement>;
onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement>;
onVolumeChange?: React.ReactEventHandler<HTMLDivElement>;
onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
onWaiting?: React.ReactEventHandler<HTMLDivElement>;
onWaitingCapture?: React.ReactEventHandler<HTMLDivElement>;
onAuxClick?: React.MouseEventHandler<HTMLDivElement>;
onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement>;
onClick?: React.MouseEventHandler<HTMLDivElement>;
onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement>;
onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement>;
onDragCapture?: React.DragEventHandler<HTMLDivElement>;
onDragEndCapture?: React.DragEventHandler<HTMLDivElement>;
onDragEnter?: React.DragEventHandler<HTMLDivElement>;
onDragEnterCapture?: React.DragEventHandler<HTMLDivElement>;
onDragExit?: React.DragEventHandler<HTMLDivElement>;
onDragExitCapture?: React.DragEventHandler<HTMLDivElement>;
onDragLeave?: React.DragEventHandler<HTMLDivElement>;
onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement>;
onDragOver?: React.DragEventHandler<HTMLDivElement>;
onDragOverCapture?: React.DragEventHandler<HTMLDivElement>;
onDragStartCapture?: React.DragEventHandler<HTMLDivElement>;
onDrop?: React.DragEventHandler<HTMLDivElement>;
onDropCapture?: React.DragEventHandler<HTMLDivElement>;
onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement>;
onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement>;
onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
onSelect?: React.ReactEventHandler<HTMLDivElement>;
onSelectCapture?: React.ReactEventHandler<HTMLDivElement>;
onTouchCancel?: React.TouchEventHandler<HTMLDivElement>;
onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement>;
onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement>;
onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement>;
onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement>;
onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
onPointerMove?: React.PointerEventHandler<HTMLDivElement>;
onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement>;
onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement>;
onPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement>;
onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
onPointerOver?: React.PointerEventHandler<HTMLDivElement>;
onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement>;
onPointerOut?: React.PointerEventHandler<HTMLDivElement>;
onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement>;
onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
onScroll?: React.UIEventHandler<HTMLDivElement>;
onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
onWheel?: React.WheelEventHandler<HTMLDivElement>;
onWheelCapture?: React.WheelEventHandler<HTMLDivElement>;
onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement>;
onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement>;
onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement>;
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement>;
onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement>;
onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement>;
key?: React.Key;
style?: import("framer-motion").MotionStyle;
propagate?: import("motion-dom").PropagateOptions;
initial?: import("motion-dom").TargetAndTransition | import("motion-dom").VariantLabels | boolean;
animate?: import("motion-dom").TargetAndTransition | import("motion-dom").VariantLabels | boolean | import("motion-dom").LegacyAnimationControls;
exit?: import("motion-dom").TargetAndTransition | import("motion-dom").VariantLabels;
variants?: import("motion-dom").Variants;
transition?: import("motion-dom").Transition;
onUpdate?(latest: import("motion-dom").ResolvedValues): void;
onAnimationStart?(definition: import("motion-dom").AnimationDefinition): void;
onAnimationComplete?(definition: import("motion-dom").AnimationDefinition): void;
onBeforeLayoutMeasure?(box: import("motion-utils").Box): void;
onLayoutMeasure?(box: import("motion-utils").Box, prevBox: import("motion-utils").Box): void;
onLayoutAnimationStart?(): void;
onLayoutAnimationComplete?(): void;
onPan?(event: PointerEvent, info: import("motion-dom").PanInfo): void;
onPanStart?(event: PointerEvent, info: import("motion-dom").PanInfo): void;
onPanSessionStart?(event: PointerEvent, info: import("motion-dom").EventInfo): void;
onPanEnd?(event: PointerEvent, info: import("motion-dom").PanInfo): void;
onTap?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").TapInfo): void;
onTapStart?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").TapInfo): void;
onTapCancel?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").TapInfo): void;
whileTap?: import("motion-dom").VariantLabels | import("motion-dom").TargetAndTransition;
globalTapTarget?: boolean;
whileHover?: import("motion-dom").VariantLabels | import("motion-dom").TargetAndTransition;
onHoverStart?(event: PointerEvent, info: import("motion-dom").EventInfo): void;
onHoverEnd?(event: PointerEvent, info: import("motion-dom").EventInfo): void;
whileFocus?: import("motion-dom").VariantLabels | import("motion-dom").TargetAndTransition;
whileInView?: import("motion-dom").VariantLabels | import("motion-dom").TargetAndTransition;
onViewportEnter?: import("motion-dom").ViewportEventHandler;
onViewportLeave?: import("motion-dom").ViewportEventHandler;
viewport?: import("motion-dom").ViewportOptions;
onDragStart?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").PanInfo): void;
onDragEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").PanInfo): void;
onDrag?(event: MouseEvent | TouchEvent | PointerEvent, info: import("motion-dom").PanInfo): void;
onDirectionLock?(axis: "x" | "y"): void;
onDragTransitionEnd?(): void;
drag?: boolean | "x" | "y";
whileDrag?: import("motion-dom").VariantLabels | import("motion-dom").TargetAndTransition;
dragDirectionLock?: boolean;
dragPropagation?: boolean;
dragConstraints?: false | Partial<import("motion-utils").BoundingBox> | {
current: Element | null;
};
dragElastic?: import("motion-dom").DragElastic;
dragMomentum?: boolean;
dragTransition?: import("motion-dom").InertiaOptions;
dragControls?: any;
dragSnapToOrigin?: boolean | "x" | "y";
dragListener?: boolean;
onMeasureDragConstraints?: (constraints: import("motion-utils").BoundingBox) => import("motion-utils").BoundingBox | void;
_dragX?: import("motion-dom").MotionValue<number>;
_dragY?: import("motion-dom").MotionValue<number>;
layout?: boolean | "position" | "size" | "preserve-aspect" | "x" | "y";
layoutId?: string;
layoutDependency?: any;
layoutScroll?: boolean;
layoutRoot?: boolean;
layoutAnchor?: {
x: number;
y: number;
} | false;
"data-framer-portal-id"?: string;
layoutCrossfade?: boolean;
custom?: any;
inherit?: boolean;
ignoreStrict?: boolean;
values?: {
[key: string]: import("motion-dom").MotionValue<number> | import("motion-dom").MotionValue<string>;
};
transformTemplate?: import("motion-dom").TransformTemplate;
"data-framer-appear-id"?: string;
className: string;
}>;