Class CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Creates a smooth custom cursor that replaces the native cursor and follows mouse movements with smoothing and animations. The cursor's appearance and behavior can be customized, and it supports interacting with hoverable elements.

Requires

Requires styles: @import '~vevet/lib/styles/components/CustomCursor';

Hierarchy

Component<StaticProps, ChangeableProps, CallbacksTypes>
- CustomCursor

Constructors

constructor

new CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>(initialProps?, canInit?): CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>
Type Parameters
- StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps
- ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps
- CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes
Parameters
- Optional initialProps: StaticProps & ChangeableProps
- canInit: boolean = true
Returns CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>
Overrides Component.constructor
- Defined in src/components/CustomCursor/index.ts:157

Accessors

callbacks

get callbacks(): Callbacks<CallbacksTypes>
Retrieves the module's registered callbacks.

Returns Callbacks<CallbacksTypes>
Inherited from ComponentClass.callbacks
- Defined in src/base/Module/index.ts:79

container

get container(): Element | Window
The cursor container.

Returns Element | Window
- Defined in src/components/CustomCursor/index.ts:47

coords

get coords(): ICoords
The current coordinates (x, y, width, height). These are updated during cursor movement.

Returns ICoords
- Defined in src/components/CustomCursor/index.ts:113

domContainer

get domContainer(): HTMLElement
Returns the DOM parent for the cursor element.

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:58

hoveredElement

get hoveredElement(): undefined | IHoveredElement
The currently hovered element. Stores information about the element that the cursor is currently interacting with.

Returns undefined | IHoveredElement
- Defined in src/components/CustomCursor/index.ts:95
set hoveredElement(value): void
Parameters
- value: undefined | IHoveredElement
Returns void
- Defined in src/components/CustomCursor/index.ts:99

innerElement

get innerElement(): HTMLElement
The inner element of the custom cursor. This element is nested inside the outer element and can provide additional styling.

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:81

isCoordsInterpolated

get isCoordsInterpolated(): boolean
Checks if all coordinates are interpolated.

Returns boolean
True if all coordinates are interpolated, false otherwise.
- Defined in src/components/CustomCursor/index.ts:397

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from ComponentClass.isDestroyed
- Defined in src/base/Module/index.ts:118

isInitialized

get isInitialized(): boolean
Checks if the module has been initialized.

Returns boolean
Inherited from ComponentClass.isInitialized
- Defined in src/base/Module/index.ts:108

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from ComponentClass.name
- Defined in src/base/Module/index.ts:93

outerElement

get outerElement(): HTMLElement
The outer element of the custom cursor. This is the visual element that represents the cursor on screen.

Returns HTMLElement
- Defined in src/components/CustomCursor/index.ts:70

prefix

get prefix(): string
Optional prefix for class names used by the module

Returns string
Overrides ComponentClass.prefix
- Defined in src/components/CustomCursor/index.ts:42

props

get props(): TRequiredModuleProp<StaticProps & ChangeableProps>
The current properties of the module, which include both static and changeable properties. These can be retrieved dynamically during the module's lifecycle.

Returns TRequiredModuleProp<StaticProps & ChangeableProps>
Inherited from ComponentClass.props
- Defined in src/base/Module/index.ts:64

targetCoords

get targetCoords(): {
    height: number;
    width: number;
    x: number;
    y: number;
}
Target coordinates of the cursor for interpolation.

Returns {
    height: number;
    width: number;
    x: number;
    y: number;
}
- height: number
- width: number
- x: number
- y: number
- Defined in src/components/CustomCursor/index.ts:121

Methods

addCallback

addCallback<T>(target, action, settings?): IAddedCallback
Adds a custom callback to the module.
Type Parameters
- T extends string | number | symbol
Parameters
- target: T
  
  The event type to listen for (e.g., 'propsChange', 'destroy').
- action: TAction<CallbacksTypes[T]>
  
  The function to execute when the event is triggered.
- settings: ISettings = {}
  
  Additional settings for the callback.
Returns IAddedCallback
Inherited from Component.addCallback
- Defined in src/base/Module/index.ts:245

addEventListener

addEventListener<Target, Listener>(element, target, callback, options?): (() => void)
Adds a DOM event listener that will be automatically removed when the module is destroyed.
Type Parameters
- Target extends keyof HTMLElementEventMap
- Listener extends ((event) => void)
Parameters
- element: Document | Element | Window
  
  The target element for the event listener.
- target: Target
  
  The event type to listen for (e.g., 'click', 'resize').
- callback: Listener
  
  The callback function to execute when the event is triggered.
- Optional options: boolean | AddEventListenerOptions
  
  Additional options for the event listener.
Returns (() => void)
- - (): void
  - Returns void
Inherited from Component.addEventListener
- Defined in src/base/Module/index.ts:261

addHoverElement

addHoverElement(settingsProp, enterTimeout?): {
remove: (() => void);
}
Sets hover events on an element.
Parameters
- settingsProp: IHoveredElement
  
  The settings for the hovered element.
- Optional enterTimeout: number = 100
  
  The timeout before the hover effect is applied.
Returns {
remove: (() => void);
}
An object containing a remove method to unregister the hover events.
- remove: (() => void)
  - - (): void
    - Returns void
- Defined in src/components/CustomCursor/index.ts:348

addPlugin

addPlugin<T>(plugin): void
Adds a plugin to the component. The plugin is initialized upon being added, and the plugin's component property is set to the current component instance.
Type Parameters
- T extends Plugin<any, any, any, any>
Parameters
- plugin: T
  
  An instance of the Plugin class to be added.
Returns void
Inherited from Component.addPlugin
- Defined in src/base/Component/index.ts:30

addResponsiveProps

addResponsiveProps(rules): void
Adds responsive property rules to the module. This must be done before initialization.
Parameters
- rules: IResponsive<ChangeableProps>
  
  The responsive property rules to be added.
Returns void
Inherited from Component.addResponsiveProps
- Defined in src/base/Module/index.ts:159

addViewportCallback

addViewportCallback(target, action, data?): void
Adds a viewport callback that will be automatically removed when the module is destroyed.
Parameters
- target: keyof IViewportCallbackTypes
  
  The viewport target (e.g., width or height).
- action: (() => void)
  
  The callback function to execute when the viewport target changes.
  - - (): void
    - Returns void
- data: undefined | ISettings = {}
  
  Additional data for the callback.
Returns void
Inherited from Component.addViewportCallback
- Defined in src/base/Module/index.ts:225

changeProps

changeProps(props): void
Updates the changeable properties of the module.
Parameters
- props: Partial<ChangeableProps>
  
  The properties to be updated.
Returns void
Inherited from Component.changeProps
- Defined in src/base/Module/index.ts:174

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Component.destroy
- Defined in src/base/Module/index.ts:310

init

init(): void
Initializes the module. Calls the internal _init method and marks the module as initialized.

Returns void
Inherited from Component.init
- Defined in src/base/Module/index.ts:194

render

render(): void
Renders the scene.

Returns void
- Defined in src/components/CustomCursor/index.ts:409

Class CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Requires

Link

Link

Type Parameters

StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps

ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps

CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes

Hierarchy

Index

Constructors

Accessors

Methods

Constructors

constructor

Type Parameters

StaticProps extends NCustomCursor.IStaticProps = NCustomCursor.IStaticProps

ChangeableProps extends NCustomCursor.IChangeableProps = NCustomCursor.IChangeableProps

CallbacksTypes extends NCustomCursor.ICallbacksTypes = NCustomCursor.ICallbacksTypes

Parameters

Optional initialProps: StaticProps & ChangeableProps

canInit: boolean = true

Returns CustomCursor<StaticProps, ChangeableProps, CallbacksTypes>

Accessors

callbacks

Returns Callbacks<CallbacksTypes>

container

Returns Element | Window

coords

Returns ICoords

domContainer

Returns HTMLElement

hoveredElement

Returns undefined | IHoveredElement

Parameters

value: undefined | IHoveredElement

Returns void

innerElement

Returns HTMLElement

isCoordsInterpolated

Returns boolean

isDestroyed

Returns boolean

isInitialized

Returns boolean

name

Returns string

outerElement

Returns HTMLElement

prefix

Returns string

props

Returns TRequiredModuleProp<StaticProps & ChangeableProps>

targetCoords

Returns { height: number; width: number; x: number; y: number; }

height: number

width: number

x: number

y: number

Methods

addCallback

Type Parameters

T extends string | number | symbol

Parameters

target: T

action: TAction<CallbacksTypes[T]>

settings: ISettings = {}

Returns IAddedCallback

addEventListener

Type Parameters

Target extends keyof HTMLElementEventMap

Listener extends ((event) => void)

Parameters

element: Document | Element | Window

target: Target

callback: Listener

Optional options: boolean | AddEventListenerOptions

Returns (() => void)

Returns void

addHoverElement

`Optional` initialProps: StaticProps & ChangeableProps

Returns {
height: number;
width: number;
x: number;
y: number;
}

`Optional` options: boolean | AddEventListenerOptions

`Optional` enterTimeout: number = 100

Returns {
remove: (() => void);
}