Skip to main content

@twick/visualizer

Table of contents​

Interfaces​

Type Aliases​

Variables​

Type Aliases​

AnimationParams​

Ƭ AnimationParams: Object

Type declaration​

NameType
animate?"enter" | "exit" | "both"
containerRef?Reference<any>
direction?"left" | "right" | "center" | "up" | "down"
duration?number
elementRefReference<any>
intensity?number
interval?number
mode?"in" | "out"
viewView2D

Defined in​

helpers/types.ts:190

AnimationProps​

Ƭ AnimationProps: Object

Type declaration​

NameType
animate?"enter" | "exit" | "both"
direction?"left" | "right" | "center" | "up" | "down"
duration?number
intensity?number
interval?number
mode?"in" | "out"
namestring

Defined in​

helpers/types.ts:202

Caption​

Ƭ Caption: Object

Type declaration​

NameType
capStyle?string
enumber
props?CaptionProps
snumber
tstring

Defined in​

helpers/types.ts:77

CaptionColors​

Ƭ CaptionColors: Object

Type declaration​

NameType
background?string
highlight?string
text?string

Defined in​

helpers/types.ts:98

CaptionFont​

Ƭ CaptionFont: Object

Type declaration​

NameType
family?string
size?number
style?string
weight?number

Defined in​

helpers/types.ts:104

CaptionProps​

Ƭ CaptionProps: Object

Type declaration​

NameType
bgMargin?[number, number]
bgOffsetHeight?number
bgOffsetWidth?number
bgOpacity?number
bgPadding?[number, number]
bgRadius?number
colorsCaptionColors
fontCaptionFont
x?number
y?number

Defined in​

helpers/types.ts:85

CaptionStyle​

Ƭ CaptionStyle: Object

Type declaration​

NameType
rect{ alignItems?: string ; gap?: number ; justifyContent?: string ; padding?: [number, number] ; radius?: number }
rect.alignItems?string
rect.gap?number
rect.justifyContent?string
rect.padding?[number, number]
rect.radius?number
word{ bgColor?: string ; bgOffsetHeight?: number ; bgOffsetWidth?: number ; fill: string ; fontFamily: string ; fontSize: number ; fontWeight: number ; lineWidth: number ; shadowBlur?: number ; shadowColor?: string ; shadowOffset?: number[] ; stroke: string ; strokeFirst?: boolean }
word.bgColor?string
word.bgOffsetHeight?number
word.bgOffsetWidth?number
word.fillstring
word.fontFamilystring
word.fontSizenumber
word.fontWeightnumber
word.lineWidthnumber
word.shadowBlur?number
word.shadowColor?string
word.shadowOffset?number[]
word.strokestring
word.strokeFirst?boolean

Defined in​

helpers/types.ts:52

ElementParams​

Ƭ ElementParams: Object

Type declaration​

NameType
caption?Caption
containerRefReference<any>
element?VisualizerElement
viewView2D
waitOnStart?boolean

Defined in​

helpers/types.ts:154

FrameEffect​

Ƭ FrameEffect: Object

Type declaration​

NameType
enumber
namestring
propsFrameEffectProps
snumber

Defined in​

helpers/types.ts:34

FrameEffectParams​

Ƭ FrameEffectParams: Object

Type declaration​

NameType
containerRef?Reference<any>
elementRefReference<any>
frameEffectFrameEffect
initFrameStateFrameState

Defined in​

helpers/types.ts:217

FrameEffectProps​

Ƭ FrameEffectProps: Object

Type declaration​

NameType
elementPositionPosition
framePositionPosition
frameShape"circle" | "rect"
frameSizeSizeArray
objectFitObjectFit
radiusnumber
transitionDurationnumber
transitionEasing?string

Defined in​

helpers/types.ts:41

FrameState​

Ƭ FrameState: Object

Type declaration​

NameType
element{ pos: Vector2 ; scale: Vector2 ; size: Vector2 }
element.posVector2
element.scaleVector2
element.sizeVector2
frame{ pos: Vector2 ; radius: number ; rotation: number ; scale: Vector2 ; size: Vector2 }
frame.posVector2
frame.radiusnumber
frame.rotationnumber
frame.scaleVector2
frame.sizeVector2

Defined in​

helpers/types.ts:229

MediaType​

Ƭ MediaType: "video" | "image"

Defined in​

helpers/types.ts:13

ObjectFit​

Ƭ ObjectFit: "contain" | "cover" | "fill" | "none"

Defined in​

helpers/types.ts:15

Position​

Ƭ Position: Object

Type declaration​

NameType
xnumber
ynumber

Defined in​

helpers/types.ts:29

Size​

Ƭ Size: Object

Type declaration​

NameType
heightnumber
widthnumber

Defined in​

helpers/types.ts:22

SizeArray​

Ƭ SizeArray: [number, number]

Defined in​

helpers/types.ts:27

SizeVector​

Ƭ SizeVector: Object

Type declaration​

NameType
xnumber
ynumber

Defined in​

helpers/types.ts:17

TextEffectParams​

Ƭ TextEffectParams: Object

Type declaration​

NameType
bufferTime?number
delay?number
direction?"left" | "right" | "center"
duration?number
elementRefReference<any>
interval?number

Defined in​

helpers/types.ts:167

TextEffectProps​

Ƭ TextEffectProps: Object

Type declaration​

NameType
bufferTime?number
delay?number
direction?"left" | "right" | "center"
duration?number
interval?number
namestring

Defined in​

helpers/types.ts:176

VideoInput​

Ƭ VideoInput: Object

Type declaration​

NameType
backgroundColorstring
properties{ height: number ; width: number }
properties.heightnumber
properties.widthnumber
timelineVisualizerTimeline[]

Defined in​

helpers/types.ts:4

VisualizerElement​

Ƭ VisualizerElement: Object

Type declaration​

NameType
animation?AnimationProps
backgroundColor?string
enumber
frame?any
frameEffects?FrameEffect[]
hWords?any
idstring
objectFit?"contain" | "cover" | "fill"
props?any
snumber
scale?number
t?string
textEffectTextEffectProps
timelineId?string
type?string

Defined in​

helpers/types.ts:111

VisualizerTimeline​

Ƭ VisualizerTimeline: Object

Type declaration​

NameType
captions?Caption[]
elementsVisualizerElement[]
idstring
props?{ bgOpacity?: number ; capStyle?: string ; captionProps?: CaptionProps ; colors?: { background?: string ; highlight?: string ; text?: string } ; font?: { family?: string ; size?: number ; style?: string ; weight?: number } ; x?: number ; y?: number }
props.bgOpacity?number
props.capStyle?string
props.captionProps?CaptionProps
props.colors?{ background?: string ; highlight?: string ; text?: string }
props.colors.background?string
props.colors.highlight?string
props.colors.text?string
props.font?{ family?: string ; size?: number ; style?: string ; weight?: number }
props.font.family?string
props.font.size?number
props.font.style?string
props.font.weight?number
props.x?number
props.y?number
typestring

Defined in​

helpers/types.ts:129

Variables​

scene​

• Const scene: SceneDescription<ThreadGeneratorFactory<View2D>>

Creates and configures the main scene for video visualization

Param

Name of the scene

Param

Generator function that handles scene setup and animation

Defined in​

visualizer.tsx:27