Animating opacity with useRSXformBuffer on each instance independantly

[MisterSzled]

Is it possible to animate opacity on each instance the same way I can each instances scale/position

I'm trying to setup an animation (a meteor effect) with a large number of particles, > 1000, and I can't see how to animate the opacity on a per instance basis - but I can animate everything else relevant.

Currently I can:

• Draw a group to a texture:

const texture = useTexture(
        <Group  >
                <Path path={path}  >
                        <LinearGradient
                                start={vec(CIRCLE_CENTER_X + CIRCLE_RADIUS, CIRCLE_CENTER_Y - CIRCLE_RADIUS)}
                                end={vec(TAIL_END_X, TAIL_END_Y)}
                                colors={["#FFFFFFFF", "#00000000"]}
                        />
                </Path>
                <Circle cx={CIRCLE_CENTER_X} cy={CIRCLE_CENTER_Y} r={CIRCLE_RADIUS} color={"#FFFFFFFF"} />
        </Group>,
        {
                width: DRAW_DIMENSIONS_X,
                height: DRAW_DIMENSIONS_Y,
        },
);

• Fill a matching array of sprites: const sprites = new Array(PARTICLE_COUNT).fill(0).map(() => rect(0, 0, DRAW_DIMENSIONS_X, DRAW_DIMENSIONS_Y));
• Generate a transform buffer populated with the shared values:

const transforms = useRSXformBuffer(
        PARTICLE_COUNT,
        (val, i) => {
                "worklet";

                const ref_shared = particle_shared.value[i];

                val.set(ref_shared.size, 0, ref_shared.pos_x, ref_shared.pos_y);
        }
);

• Animate with reanimated in a framecall back

const animate = useFrameCallback(() => {
        "worklet";

        let clone = { ...particle_shared.value };
        for (let i = 0; i < Object.keys(clone).length; i++) {

                const particle = clone[i];

                // ...
                // ...
                // ...

                particle.pos_x += particle.vx;
                particle.pos_y += particle.vy;
                
                // Some opacity logic...
        }
        particle_shared.value = { ...clone };
})

• And finally slap it all into an atlas

return (
        <Atlas
                image={texture}
                sprites={sprites}
                transforms={transforms}
        />
);

The result is almost what I want but without the fade in/out as a function of the shared values x and y coords.

I tried messing about with blend modes and color buffers. The best I had did have opacity animating on an x-coordinate basis, but since the color was being applied to the whole texture, each instance had an enormous colored block around it and they also clipped and overlapped each other.

Similarly I've looked into applying masks, but I can't see how to do it on an individual instance instead of just the whole texture or atlas.

Any help would really be appreciated.