Cursors

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltCursorPointerWireframe

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe>
        <VeltCursorPointerWireframe.Arrow />
        <VeltCursorPointerWireframe.Avatar />
        <VeltCursorPointerWireframe.Default />
        <VeltCursorPointerWireframe.AudioHuddle />
        <VeltCursorPointerWireframe.VideoHuddle />
    </VeltCursorPointerWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
  <velt-cursor-pointer-wireframe>
    <velt-cursor-pointer-arrow-wireframe></velt-cursor-pointer-arrow-wireframe>
    <velt-cursor-pointer-avatar-wireframe></velt-cursor-pointer-avatar-wireframe>
    <velt-cursor-pointer-default-wireframe></velt-cursor-pointer-default-wireframe>
    <velt-cursor-pointer-audio-huddle-wireframe></velt-cursor-pointer-audio-huddle-wireframe>
    <velt-cursor-pointer-video-huddle-wireframe></velt-cursor-pointer-video-huddle-wireframe>
  </velt-cursor-pointer-wireframe>
</velt-wireframe>

Arrow

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.Arrow />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-arrow-wireframe></velt-cursor-pointer-arrow-wireframe>
</velt-wireframe>

Avatar

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.Avatar />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-avatar-wireframe></velt-cursor-pointer-avatar-wireframe>
</velt-wireframe>

Default

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.Default>
        <VeltCursorPointerWireframe.Default.Name />
        <VeltCursorPointerWireframe.Default.Comment />
    </VeltCursorPointerWireframe.Default>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-default-wireframe>
        <velt-cursor-pointer-default-name-wireframe></velt-cursor-pointer-default-name-wireframe>
        <velt-cursor-pointer-default-comment-wireframe></velt-cursor-pointer-default-comment-wireframe>
    </velt-cursor-pointer-default-wireframe>
</velt-wireframe>

Name

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.Default.Name />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-default-name-wireframe></velt-cursor-pointer-default-name-wireframe>
</velt-wireframe>

Comment

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.Default.Comment />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-default-comment-wireframe></velt-cursor-pointer-default-comment-wireframe>
</velt-wireframe>

AudioHuddle

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle>
        <VeltCursorPointerWireframe.AudioHuddle.Avatar />
        <VeltCursorPointerWireframe.AudioHuddle.Audio />
    </VeltCursorPointerWireframe.AudioHuddle>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-audio-huddle-wireframe>
        <velt-cursor-pointer-audio-huddle-avatar-wireframe></velt-cursor-pointer-audio-huddle-avatar-wireframe>
        <velt-cursor-pointer-audio-huddle-audio-wireframe></velt-cursor-pointer-audio-huddle-audio-wireframe>
    </velt-cursor-pointer-audio-huddle-wireframe>
</velt-wireframe>

Avatar

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle.Avatar />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-audio-huddle-avatar-wireframe></velt-cursor-pointer-audio-huddle-avatar-wireframe>
</velt-wireframe>

Audio

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.AudioHuddle.Audio />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-audio-huddle-audio-wireframe></velt-cursor-pointer-audio-huddle-audio-wireframe>
</velt-wireframe>

VideoHuddle

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltCursorPointerWireframe.VideoHuddle />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-cursor-pointer-video-huddle-wireframe></velt-cursor-pointer-video-huddle-wireframe>
</velt-wireframe>

Limitations

There is no live-cursor pin or image prop. pin-cursor-image is a VeltComments prop for the comment-placement cursor, not live cursors. To change the live cursor glyph, use the <slot name="cursor"> or the .Arrow wireframe above.
The root <velt-cursor> isn’t wireframable. It spawns one pointer per remote user; only the per-user pointer has a wireframe.
Your own cursor is hidden in normal use. selfCursorPointer renders only in huddle-on-cursor mode.
Requires an identified (non-anonymous) user.

Concepts

Approaches

Components: Async Collaboration

Components: Realtime Collaboration

Reference

VeltCursorPointerWireframe

Arrow

Avatar

Default

Name

Comment

AudioHuddle

Avatar

Audio

VideoHuddle

Limitations

​VeltCursorPointerWireframe

​Arrow

​Avatar

​Default

​Name

​Comment

​AudioHuddle

​Avatar

​Audio

​VideoHuddle

​Limitations

VeltCursorPointerWireframe

Arrow

Avatar

Default

Name

Comment

AudioHuddle

Avatar

Audio

VideoHuddle

Limitations