Javascript API
interfaces
Confetti

Interface: Confetti

View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.

Hierarchy

Properties

BackdropBlur

Optional BackdropBlur: BackdropBlurEffect

Inherited from

View.BackdropBlur


BlendMode

Optional BlendMode: BlendModeEffect

Inherited from

View.BlendMode


Blur

Optional Blur: BlurEffect

Inherited from

View.Blur


Brightness

Optional Brightness: BrightnessEffect

Inherited from

View.Brightness


Contrast

Optional Contrast: ContrastEffect

Inherited from

View.Contrast


Draggable

Optional Draggable: DraggableEffect

Inherited from

View.Draggable


Follow

Optional Follow: FollowEffect

Inherited from

View.Follow


Glow

Optional Glow: GlowEffect

Inherited from

View.Glow


Grayscale

Optional Grayscale: GrayscaleEffect

Inherited from

View.Grayscale


HueRotate

Optional HueRotate: HueRotateEffect

Inherited from

View.HueRotate


Invert

Optional Invert: InvertEffect

Inherited from

View.Invert


LetterSpacing

Optional LetterSpacing: LetterSpacingEffect

Inherited from

View.LetterSpacing


LookAt

Optional LookAt: LookAtEffect

Inherited from

View.LookAt


Oscillate

Optional Oscillate: OscillateEffect

Inherited from

View.Oscillate


Physics

Optional Physics: PhysicsEffect

Inherited from

View.Physics


Saturation

Optional Saturation: SaturationEffect

Inherited from

View.Saturation


Sepia

Optional Sepia: SepiaEffect

Inherited from

View.Sepia


Shadow

Optional Shadow: ShadowEffect

Inherited from

View.Shadow


Spin

Optional Spin: SpinEffect

Inherited from

View.Spin


TextOutline

Optional TextOutline: TextOutlineEffect

Inherited from

View.TextOutline


Transform

Optional Transform: TransformEffect

Inherited from

View.Transform


angle

angle: number

The angle in which to launch the confetti, in degrees. 90 is straight up.

Default

90

autoplay

autoplay: boolean

Whether to play the confetti automatically or wait until its play method is called.

Default

true

backgroundColor

backgroundColor: undefined | string

The background color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined background color is transparent.

Example

// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'

Inherited from

View.backgroundColor


color

color: undefined | string

The foreground or text color of the component.

Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)). An undefined foreground color is inherited from one of the component's ancestors.

Example

// Set the foreground color of the view to red.
view.color = 'red';

Inherited from

View.color


colors

colors: string

A list of color strings, in the HEX format... you know, like #bada55.

Default

'#26ccff #a25afd #ff5e7e #88ff5a #fcff42 #ffa62d #ff36ff'

componentType

Readonly componentType: string

The component's type. E.g. "View", "Text", "Button", "Page", etc.

Inherited from

View.componentType


decay

decay: number

How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.

Default

0.9

drift

drift: number

How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.

Default

0

gravity

gravity: number

How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.

Default

1.0

height

height: number

The height of the component.

Inherited from

View.height


id

Readonly id: number

Every Component is assigned a unique numerical id that cannot be changed. Components can be looked up by id using the get function.

Inherited from

View.id


link

link: undefined | string

The address of the link. Can be a URL to a web page, a 'tel:' phone number, a 'mailto:' email address, or a 'sms:' phone number. Also can be a relative link to a page, "@previous" for the previous page, or "@next" for the next page. If undefined the component is not treated as a link.

Default

undefined

Inherited from

View.link


linkRel

linkRel: LinkRelType

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)

Inherited from

View.linkRel


linkTarget

linkTarget: "_blank" | "_self" | "_parent" | "_top"

The target of the link. Can be '_blank' (open in new window or tab), '_self' (replace current page), '_parent' (replace parent if in an iframe), or '_top' (replace top if in an iframe).

Default

'_self'

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target (opens in a new tab)

Inherited from

View.linkTarget


linkTitle

linkTitle: string

The title of the link displayed on hover. If '' nothing is displayed.

Default

''

Inherited from

View.linkTitle


name

name: undefined | string

Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique. Components can be looked up by name using the get function.

Inherited from

View.name


opacity

opacity: number

The component's opacity, or level of transparency.

1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.

Inherited from

View.opacity


originX

originX: number

The x position in the object, with 0 being the left edge and 1 being the right edge.

Default

0.5

originY

originY: number

The y position on the object, with 0 being the top edge and 1 being the bottom edge.

Default

1.0

page

Readonly page: undefined | Page

The Page that this component is a child of, if any.

Inherited from

View.page


parent

Readonly parent: undefined | View

When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.

Inherited from

View.parent


particleCount

particleCount: number

The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.

Default

100

rotation

rotation: number

The component's rotation, in degrees.

Inherited from

View.rotation


scalar

scalar: number

Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go on, try teeny tiny confetti, they are adorable!

Default

1

scale

scale: number

The component's scale multiplier.

Inherited from

View.scale


shapes

shapes: string

An list of shapes for the confetti. The possible values are square and circle. The default is to use both shapes in an even mix.

You can even change the mix by providing a value such as "circle circle square" to use two third circles and one third squares.

Default

'circle square'

spread

spread: number

How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.

Default

45

startVelocity

startVelocity: number

How fast the confetti will start going, in pixels.

Default

45

style

style: Partial (opens in a new tab)<CSSStyleDeclaration (opens in a new tab)>

Low-level access to the component's CSS property.

Inherited from

View.style


tabIndex

tabIndex: undefined | number

Control if or how the component is focused when the tab key is pressed.

0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.

Default

undefined

See

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)

Inherited from

View.tabIndex


visible

visible: boolean

The component's visibility.

true is visible, false is invisible

Inherited from

View.visible


width

width: number

The width of the component.

Inherited from

View.width


x

x: number

The component's x coordinate.

Inherited from

View.x


y

y: number

The component's y coordinate.

Inherited from

View.y

Methods

addEffect

addEffect(effect): void

Add an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.addEffect


clone

clone(): Confetti

Create an exact duplicate of a component.

The clone must be added to a container with appendChild to be visible.

Returns

Confetti

Example

const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);

Overrides

View.clone


dispatchEvent

dispatchEvent(event): Promise (opens in a new tab)<void>

Triggers the event listeners for the specified event.

Parameters

NameType
eventEvent (opens in a new tab)

Returns

Promise (opens in a new tab)<void>

Inherited from

View.dispatchEvent


focus

focus(options?): void

Parameters

NameType
options?FocusOptions

Returns

void

Inherited from

View.focus


hasPointerCapture

hasPointerCapture(pointerId): boolean

Parameters

NameType
pointerIdnumber

Returns

boolean

Inherited from

View.hasPointerCapture


localPointFromClient

localPointFromClient(clientX, clientY): Object

Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.

Parameters

NameTypeDescription
clientXnumberThe x position in the client viewport.
clientYnumberThe y position in the client viewport.

Returns

Object

an object with x and y properties in the local coordinate system of the component.

NameType
xnumber
ynumber

Example

let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
  this.setPointerCapture(event.pointerId);
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(event.clientX, event.clientY)
  pointerOffset = { x: point.x - this.x, y: point.y - this.y };
  dragging = true;
});
 
this.on("pointermove", (ev) => {
if (!dragging)
    return;
  // note: objects are positioned within their parent's coordinate system
  const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
  this.x = point.x - pointerOffset.x;
  this.y = point.y - pointerOffset.y;
});
 
this.on("pointerup", (event) => {
  this.releasePointerCapture(event.pointerId);
  dragging = false;
});

Inherited from

View.localPointFromClient


on

on<K>(type, listener, options?): () => void

Add an event listener to the component.

Type parameters

NameType
Kextends keyof EventHandlersEventMap

Parameters

NameType
typeK
listener(event: EventHandlersEventMap[K]) => any
options?EventListenerOptions

Returns

fn

Returns a function that removes the event listener.

▸ (): void

Add an event listener to the component.

Returns

void

Returns a function that removes the event listener.

Inherited from

View.on


play

play(): void

Play the confetti.

Returns

void


releasePointerCapture

releasePointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.releasePointerCapture


remove

remove(): void

Remove the component from its parent.

Returns

void

Example

view.remove();

Inherited from

View.remove


removeEffect

removeEffect(effect): void

Remove an effect to the component.

Parameters

NameType
effectstring

Returns

void

Inherited from

View.removeEffect


setPointerCapture

setPointerCapture(pointerId): void

Parameters

NameType
pointerIdnumber

Returns

void

Inherited from

View.setPointerCapture