Blurry small animated elements (4x4px dots) during scale animations

[quuentinho]

Description

Small animated dots (4x4 pixels) become blurry during scale animations using React Native Reanimated. The blur effect appears during the animation transitions, making the dots lose their crisp appearance.

Expected Behavior

Small dots should remain crisp and sharp during scale animations.

Actual Behavior

Dots become blurry/fuzzy during animations, especially noticeable on small elements like 4x4px indicators.

Additional Context

• The blur is most noticeable on small elements (4x4px dots)
• Using a loading indicator pattern with scale animation
• Issue appears during scale transitions from 0.8 to 1.4
• Larger elements don't seem affected as much
• Problem persists across different devices and simulators

Steps to reproduce

1. Create small animated dots (4x4px)
2. Apply scale animation using interpolate with withRepeat
3. Observe blur effect during scale transitions
4. Most noticeable when scaling from smaller to larger values (0.8 → 1.4)

Snack or a link to a repository

https://snack.expo.dev/@quentin_boulay/honest-violet-turkish-delight

Reanimated version

3.17.4

Worklets version

0

React Native version

0.79.4

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

New Architecture (Fabric renderer)

Build type

No response

Device

Real device

Host machine

None

Device model

No response

Acknowledgements

No

[MatiPl01]

Hey @QuentinBoulay!

I think that the issue is not caused by reanimated. Reanimated is not a graphics engine which renders views and doesn't impact how crisp they are. We just calculate the scale and apply it to the view, the rendering is done by the platform, so likely the loss of crisp appearance is caused by how platform handles rendering.

I also don't think that this effect is that much noticeable. Maybe dots get a little blurry during the animation but it is impossible to render them pixel-perfect when you animate the size between small numbers of pixels (like from 4px to 5px) as the device cannot render the circle 4.5px width. The device cannot just make half of the pixel on the screen have one color and the other half have a different color. Usually, to mimic the 4.5px width, the device will render 4px with fully colored and one px that has a color between the fill color of the dot and the background color. That's why you are seeing a blurry dot.

[tomekzaw]

@QuentinBoulay You can also render a bigger dot (let's say 8x8 px) and animate scale so that it is always less than 1.0. It should be more crisp since using scale bigger than 1.0 requires pixel interpolation which makes the image blurry.