Back to componentsImage effects / Halftone Portrait

Silver ronin with engraved samurai armor

LIVE PREVIEWMove your cursor through the portraitCanvas2D · Local rendering

Tweaks

Halftone settings

Preview

Show original

Preview context

Preview only. Your component settings travel with the image.

Preview background

Backdrop

Preview only. Your dot colours and exported component stay unchanged.

PNG, JPG or WebP · up to 15 MB. Prepared locally for your website.

Image description

Component background

Transparent

Included in your component. Transparent lets your website show through.

Image and crop

Image fit

Zoom

Horizontal crop

Vertical crop

Colour

Colour source

Dot colour

Accent colour

Accent mix

Contrast

Exposure

Tonal curve

Shadow cutoff

Opacity

Accent mix is 0. Increase it to show your second colour.

Dots

Dot spacing

Dot size

Size variation

Cursor

Interaction

Cursor behavior

Influence radius

Strength

Particle response

Cursor tracking

Release response

Edge softness

Cursor ring

Ring colour

Container

Aspect ratio

Corner radius

Bottom fade

Your settings travel with the component.
Preview size and pause stay here.

COMPONENT / 006 FREE

Halftone Portrait

A portrait made of light. Give it a little movement.

Use in Arclen

Halftone Portrait v1.0.0

Your image, with a little movement.

Turn a photo into dots that respond to your cursor. Adjust the colours and crop, then add it to a hero or team card. Your image and settings carry into Arclen.

Arclen-ready

React + Vanilla TypeScript

Reduced-motion support

Using your image

Exported source contains the portrait component only. Download selected image and save it at /assets/arclen-halftone-ronin-1.0.0.webp in your website’s public folder.

Package 1.0.0 · Website runtime 2.0.0Config 1354423828a1

Use in Arclen

Theme

Your image, with a little movement.

Install & usageReact / Vanilla

API reference32 properties

Rendering & accessibilityLocal renderer

Full source11 files