xeerpe - v1.0.0

xeerpe

Gleam binding for xeerpe, JavaScript target only.

Names follow xeerpe, in snake_case. Optional fields are Options, and every options type has a *_options default to update: LinearGradientOptions(..linear_gradient_options, from: Some("#fff")). A Builder is plain data; xeerpe itself runs in to_style.

Types

AnimationDirection

</> 
pub type AnimationDirection {
  Normal
  Reverse
  Alternate
  AlternateReverse
}

Constructors 

  • Normal
  • Reverse
  • Alternate
  • AlternateReverse

AnimationOptions

</> 
pub type AnimationOptions {
  AnimationOptions(
    duration: option.Option(String),
    easing: option.Option(String),
    direction: option.Option(AnimationDirection),
    iteration_count: option.Option(IterationCount),
  )
}

Constructors

AnimationType

</> 
pub type AnimationType {
  Pulse
  Rotate
  Breathe
  Aurora
  Shimmer
  Liquid
  Plasma
  Float
  Drift
}

Constructors 

  • Pulse
  • Rotate
  • Breathe
  • Aurora
  • Shimmer
  • Liquid
  • Plasma
  • Float
  • Drift

BlurOptions

</> 
pub type BlurOptions {
  BlurOptions(
    amount: option.Option(String),
    type_: option.Option(BlurType),
  )
}

Constructors

BlurType

</>

backdrop-filter, or a plain filter.

pub type BlurType {
  BackdropBlur
  PlainBlur
}

Constructors 

  • BackdropBlur
  • PlainBlur

Builder

opaque </>

xeerpe’s Builder, and Preset (a Builder that starts from a preset). Plain data: nothing runs until to_style, so it can sit in a Lustre model and be compared with ==.

pub opaque type Builder

BuilderLayer

</> 
pub type BuilderLayer {
  BuilderLayer(type_: LayerType, properties: CssProperties)
}

Constructors

ConicGradientOptions

</> 
pub type ConicGradientOptions {
  ConicGradientOptions(
    from: option.Option(String),
    to: option.Option(String),
    background_size: option.Option(String),
    colors: option.Option(List(GradientColorStop)),
    angle: option.Option(String),
    position: option.Option(String),
  )
}

Constructors

CssLength

</> 
pub type CssLength {
  CssLength(value: Float, unit: String)
}

Constructors 

  • CssLength(value: Float, unit: String)

CssProperties

</> 
pub type CssProperties {
  CssProperties(
    background: option.Option(String),
    background_image: option.Option(String),
    background_color: option.Option(String),
    background_size: option.Option(String),
    filter: option.Option(String),
    backdrop_filter: option.Option(String),
    box_shadow: option.Option(String),
    animation: option.Option(String),
  )
}

Constructors

DotsOptions

</>

Includes the fields xeerpe inherits from its base pattern options.

pub type DotsOptions {
  DotsOptions(
    color: option.Option(String),
    background: option.Option(String),
    size: option.Option(String),
    spacing: option.Option(String),
    style: option.Option(String),
    opacity: option.Option(Float),
    stroke_width: option.Option(String),
    background_size: option.Option(String),
  )
}

Constructors

EffectOptions

</> 
pub type EffectOptions {
  NoiseEffect(NoiseOptions)
  VignetteEffect(VignetteOptions)
  GrainEffect(GrainOptions)
  GlowEffect(GlowOptions)
}

Constructors

EffectType

</> 
pub type EffectType {
  Noise
  Vignette
  Grain
  Glow
}

Constructors 

  • Noise
  • Vignette
  • Grain
  • Glow

FilterOptions

</> 
pub type FilterOptions =
  BlurOptions

FilterType

</> 
pub type FilterType {
  Blur
}

Constructors 

  • Blur

GlowOptions

</> 
pub type GlowOptions {
  GlowOptions(
    amount: option.Option(String),
    spread: option.Option(String),
    x: option.Option(String),
    y: option.Option(String),
    color: option.Option(String),
    type_: option.Option(GlowType),
  )
}

Constructors

GlowType

</> 
pub type GlowType {
  Outer
  Inner
}

Constructors 

  • Outer
  • Inner

GradientColorStop

</>

A color, optionally with a stop position.

pub type GradientColorStop {
  Color(String)
  PositionedColor(
    color: String,
    position: option.Option(LinearGradientPosition),
  )
}

Constructors

GradientOptions

</> 
pub type GradientOptions {
  LinearGradient(LinearGradientOptions)
  RadialGradient(RadialGradientOptions)
  ConicGradient(ConicGradientOptions)
  MeshGradient(MeshGradientOptions)
}

Constructors

GradientType

</> 
pub type GradientType {
  Linear
  Radial
  Conic
  Mesh
}

Constructors 

  • Linear
  • Radial
  • Conic
  • Mesh

GrainOptions

</> 
pub type GrainOptions {
  GrainOptions(
    intensity: option.Option(Float),
    size: option.Option(String),
    animated: option.Option(Bool),
    background_size: option.Option(String),
  )
}

Constructors

GridOptions

</> 
pub type GridOptions {
  GridOptions(
    color: option.Option(String),
    background: option.Option(String),
    size: option.Option(String),
    opacity: option.Option(Float),
    stroke_width: option.Option(String),
    background_size: option.Option(String),
  )
}

Constructors

IterationCount

</>

A number of iterations, or forever.

pub type IterationCount {
  Count(Int)
  Infinite
}

Constructors 

  • Count(Int)
  • Infinite

Layer

</>

One recorded call.

pub type Layer {
  GradientCall(GradientType, GradientOptions)
  LinearGradientCall(LinearGradientOptions)
  RadialGradientCall(RadialGradientOptions)
  ConicGradientCall(ConicGradientOptions)
  MeshGradientCall(MeshGradientOptions)
  EffectCall(EffectType, EffectOptions)
  FilterCall(FilterType, BlurOptions)
  PatternCall(PatternType, PatternOptions)
  AnimationCall(AnimationType, AnimationOptions)
  NoiseCall(NoiseOptions)
  VignetteCall(VignetteOptions)
  GrainCall(GrainOptions)
  GlowCall(GlowOptions)
  BlurCall(BlurOptions)
  DotsCall(DotsOptions)
  GridCall(GridOptions)
  PulseCall(AnimationOptions)
  RotateCall(AnimationOptions)
  BreatheCall(AnimationOptions)
  AuroraCall(AnimationOptions)
  ShimmerCall(AnimationOptions)
  LiquidCall(AnimationOptions)
  PlasmaCall(AnimationOptions)
  FloatCall(AnimationOptions)
  DriftCall(AnimationOptions)
}

Constructors

LayerType

</> 
pub type LayerType {
  GradientLayer
  FilterLayer
  EffectLayer
  PatternLayer
  AnimationLayer
}

Constructors 

  • GradientLayer
  • FilterLayer
  • EffectLayer
  • PatternLayer
  • AnimationLayer

LinearGradientAngle

</>

An angle with its unit.

pub type LinearGradientAngle {
  Deg(Float)
  Rad(Float)
  Grad(Float)
  Turn(Float)
}

Constructors 

  • Deg(Float)
  • Rad(Float)
  • Grad(Float)
  • Turn(Float)

LinearGradientDirection

</> 
pub type LinearGradientDirection {
  ToTop
  ToBottom
  ToLeft
  ToRight
  ToTopRight
  ToBottomRight
  ToTopLeft
  ToBottomLeft
}

Constructors 

  • ToTop
  • ToBottom
  • ToLeft
  • ToRight
  • ToTopRight
  • ToBottomRight
  • ToTopLeft
  • ToBottomLeft

LinearGradientOptions

</> 
pub type LinearGradientOptions {
  LinearGradientOptions(
    from: option.Option(String),
    to: option.Option(String),
    background_size: option.Option(String),
    colors: option.Option(List(GradientColorStop)),
    angle: option.Option(LinearGradientAngle),
    direction: option.Option(LinearGradientDirection),
    size: option.Option(String),
  )
}

Constructors

LinearGradientPosition

</>

A length or percentage, or a calc() (pass what goes inside the parentheses).

pub type LinearGradientPosition {
  Unit(LinearGradientPositionUnit)
  Calc(String)
}

Constructors

LinearGradientPositionUnit

</> 
pub type LinearGradientPositionUnit {
  Percent(Float)
  Px(Float)
  Rem(Float)
  Em(Float)
  Vh(Float)
  Vw(Float)
  Vmin(Float)
  Vmax(Float)
}

Constructors 

  • Percent(Float)
  • Px(Float)
  • Rem(Float)
  • Em(Float)
  • Vh(Float)
  • Vw(Float)
  • Vmin(Float)
  • Vmax(Float)

MeshGradientOptions

</>

background and layers are required: build it with mesh_gradient_options.

pub type MeshGradientOptions {
  MeshGradientOptions(
    from: option.Option(String),
    to: option.Option(String),
    background_size: option.Option(String),
    background: String,
    layers: List(RadialGradientOptions),
  )
}

Constructors

NoiseOptions

</> 
pub type NoiseOptions {
  NoiseOptions(
    opacity: option.Option(Float),
    scale: option.Option(Float),
    type_: option.Option(NoiseType),
    octaves: option.Option(Int),
    background_size: option.Option(String),
  )
}

Constructors

NoiseType

</> 
pub type NoiseType {
  Turbulence
  FractalNoise
}

Constructors 

  • Turbulence
  • FractalNoise

PatternOptions

</> 
pub type PatternOptions {
  DotsPattern(DotsOptions)
  GridPattern(GridOptions)
}

Constructors

PatternType

</> 
pub type PatternType {
  Dots
  Grid
}

Constructors 

  • Dots
  • Grid

PresetConfig

</>

xeerpe’s PresetConfig.

pub type PresetConfig =
  fn(Builder) -> Builder

RadialGradientOptions

</> 
pub type RadialGradientOptions {
  RadialGradientOptions(
    from: option.Option(String),
    to: option.Option(String),
    background_size: option.Option(String),
    shape: option.Option(RadialGradientShape),
    position: option.Option(String),
    size: option.Option(RadialGradientSize),
    color_from_position: option.Option(String),
    color_to_position: option.Option(String),
  )
}

Constructors

RadialGradientShape

</>

circle, ellipse, or no shape keyword at all (null in xeerpe).

pub type RadialGradientShape {
  Circle
  Ellipse
  NullShape
}

Constructors 

  • Circle
  • Ellipse
  • NullShape

RadialGradientSize

</>

A size keyword, or any CSS size.

pub type RadialGradientSize {
  ClosestSide
  ClosestCorner
  FarthestSide
  FarthestCorner
  CustomSize(String)
}

Constructors 

  • ClosestSide
  • ClosestCorner
  • FarthestSide
  • FarthestCorner
  • CustomSize(String)

RgbColor

</> 
pub type RgbColor {
  RgbColor(red: Float, green: Float, blue: Float)
}

Constructors 

  • RgbColor(red: Float, green: Float, blue: Float)

RgbaColor

</> 
pub type RgbaColor {
  RgbaColor(
    red: Float,
    green: Float,
    blue: Float,
    alpha: option.Option(Float),
  )
}

Constructors 

  • RgbaColor(
  red: Float,
  green: Float,
  blue: Float,
  alpha: option.Option(Float),
)

VignetteOptions

</> 
pub type VignetteOptions {
  VignetteOptions(
    color: option.Option(String),
    intensity: option.Option(Float),
    spread: option.Option(Float),
    background_size: option.Option(String),
  )
}

Constructors

Values

animation

</> 
pub fn animation(
  b: Builder,
  type_: AnimationType,
  options: AnimationOptions,
) -> Builder

animation_options

</> 
pub const animation_options: AnimationOptions

aurora

</> 
pub fn aurora(b: Builder, options: AnimationOptions) -> Builder

blur

</> 
pub fn blur(b: Builder, options: BlurOptions) -> Builder

blur_options

</> 
pub const blur_options: BlurOptions

breathe

</> 
pub fn breathe(b: Builder, options: AnimationOptions) -> Builder

bundled_version

</> 
pub const bundled_version: String

The version of the xeerpe copy inside this package. Only a label: the code does not read it, and scripts/update-xeerpe.sh keeps it up to date.

conic_gradient

</> 
pub fn conic_gradient(
  b: Builder,
  options: ConicGradientOptions,
) -> Builder

conic_gradient_options

</> 
pub const conic_gradient_options: ConicGradientOptions

dots

</> 
pub fn dots(b: Builder, options: DotsOptions) -> Builder

dots_options

</> 
pub const dots_options: DotsOptions

drift

</> 
pub fn drift(b: Builder, options: AnimationOptions) -> Builder

effect

</> 
pub fn effect(
  b: Builder,
  type_: EffectType,
  options: EffectOptions,
) -> Builder

filter

</> 
pub fn filter(
  b: Builder,
  type_: FilterType,
  options: BlurOptions,
) -> Builder

float

</> 
pub fn float(b: Builder, options: AnimationOptions) -> Builder

glow

</> 
pub fn glow(b: Builder, options: GlowOptions) -> Builder

glow_options

</> 
pub const glow_options: GlowOptions

gradient

</> 
pub fn gradient(
  b: Builder,
  type_: GradientType,
  options: GradientOptions,
) -> Builder

grain

</> 
pub fn grain(b: Builder, options: GrainOptions) -> Builder

grain_options

</> 
pub const grain_options: GrainOptions

grid

</> 
pub fn grid(b: Builder, options: GridOptions) -> Builder

grid_options

</> 
pub const grid_options: GridOptions

layers

</> 
pub fn layers(b: Builder) -> List(Layer)

The calls recorded so far, in order.

linear_gradient

</> 
pub fn linear_gradient(
  b: Builder,
  options: LinearGradientOptions,
) -> Builder

linear_gradient_options

</> 
pub const linear_gradient_options: LinearGradientOptions

liquid

</> 
pub fn liquid(b: Builder, options: AnimationOptions) -> Builder

mesh_gradient

</> 
pub fn mesh_gradient(
  b: Builder,
  options: MeshGradientOptions,
) -> Builder

mesh_gradient_options

</> 
pub fn mesh_gradient_options(
  background: String,
  layers: List(RadialGradientOptions),
) -> MeshGradientOptions

new

</> 
pub fn new() -> Builder

new Builder().

noise

</> 
pub fn noise(b: Builder, options: NoiseOptions) -> Builder

noise_options

</> 
pub const noise_options: NoiseOptions

pattern

</> 
pub fn pattern(
  b: Builder,
  type_: PatternType,
  options: PatternOptions,
) -> Builder

plasma

</> 
pub fn plasma(b: Builder, options: AnimationOptions) -> Builder

preset

</> 
pub fn preset(name: String) -> Result(Builder, String)

new Preset(name). An unknown name is an Error instead of an exception. The bundled xeerpe has "sunrise" and "northern-lights".

pulse

</> 
pub fn pulse(b: Builder, options: AnimationOptions) -> Builder

radial_gradient

</> 
pub fn radial_gradient(
  b: Builder,
  options: RadialGradientOptions,
) -> Builder

radial_gradient_options

</> 
pub const radial_gradient_options: RadialGradientOptions

rotate

</> 
pub fn rotate(b: Builder, options: AnimationOptions) -> Builder

shimmer

</> 
pub fn shimmer(b: Builder, options: AnimationOptions) -> Builder

to_style

</> 
pub fn to_style(b: Builder) -> dict.Dict(String, String)

toStyle(). Keys stay camelCase, as in xeerpe.

to_text_style

</> 
pub fn to_text_style(b: Builder) -> dict.Dict(String, String)

toTextStyle().

use_bundled

</> 
pub fn use_bundled() -> Nil

Back to the bundled xeerpe.

use_module

</> 
pub fn use_module(module: dynamic.Dynamic) -> Result(Nil, String)

Use another xeerpe instead of the bundled one, for example a newer npm release. Pass the module (it needs Builder and Preset) once, when the app starts. Only the behaviour changes: the types still describe bundled_version.

// my_xeerpe.mjs, after `npm install xeerpe@<version>`
import * as xeerpe from "xeerpe";
export const module = () => xeerpe;

@external(javascript, "./my_xeerpe.mjs", "module")
fn my_xeerpe() -> Dynamic

let assert Ok(Nil) = xeerpe.use_module(my_xeerpe())

vignette

</> 
pub fn vignette(b: Builder, options: VignetteOptions) -> Builder

vignette_options

</> 
pub const vignette_options: VignetteOptions
✨ Search Document