Glow Border Animation

[galgord]

Hello all,

I am trying to recreate this and this https://codepen.io/liyrofx/pen/poVZeEG but is the furthers I have gotten. Can anyone help please?

import React from 'react';
import {
  Canvas,
  Easing,
  Group,
  Path,
  Skia,
  useLoop,
} from '@shopify/react-native-skia';

const BackgroundGradient = ({ width = 100, height = 100 }) => {
  const canvasPadding = 40;

  const progress = useLoop({
    duration: 2000,
    easing: Easing.linear,
  });
  const path = Skia.Path.Make();
  path.addRect({
    x: canvasPadding / 2 + progress.current * (width - canvasPadding),
    y: canvasPadding / 2 + progress.current * (height - canvasPadding),
    width,
    height,
  });

  return (
    <Canvas
      style={{
        width: width + canvasPadding,
        height: height + canvasPadding,
      }}>
      <Group>
        <Path
          path={path}
          color="black"
          style="stroke"
          strokeWidth={2}
          end={progress}
        />
      </Group>
    </Canvas>
  );
};

export default React.memo(BackgroundGradient);

[tdammy92]

@galgord where you able to implement this ??

[harrisbaird]

Here is what I came up with, it uses two sweep gradients similar to the example you gave.
I'm not sure about how well it performs as I'm new to Skia.

See the code running on this Snack: https://snack.expo.dev/@dharrisbaird/glowing-border

import React, { useEffect } from "react";
import { Dimensions } from "react-native";

import {
	Blur,
	Canvas,
	Group,
	RoundedRect,
	SweepGradient,
	vec,
} from "@shopify/react-native-skia";
import {
	Easing,
	useDerivedValue,
	useSharedValue,
	withRepeat,
	withTiming,
} from "react-native-reanimated";

const { width: screenWidth, height: screenHeight } = Dimensions.get("window");

const GLOW_COLOR = "#1976edFF";
const GLOW_BG_COLOR = "#1976ed00"; // Should be the same color as GLOW_COLOR but fully transparent
const BACKGROUND_COLOR = "#1D1E22";
const BOX_COLOR = "#292a2e";

const GlowingBorder = ({
	width = 200,
	height = 200,
	glowSize = 0.2,
	blurRadius = 20,
}) => {
	const rotation = useSharedValue(0);

	const centerX = width / 2;
	const centerY = height / 2;
	const centerVec = vec(centerX, centerY);

	useEffect(() => {
		rotation.value = withRepeat(
			withTiming(2, {
				duration: 4000,
				easing: Easing.linear,
			}),
			-1,
			false,
		);
	}, []);

	const animatedRotation = useDerivedValue(() => {
		return [{ rotate: Math.PI * rotation.value }];
	}, [rotation]);

	const GlowGradient = () => {
		return (
			<RoundedRect r={10} x={0} y={0} width={width} height={height}>
				<SweepGradient
					origin={centerVec}
					c={centerVec}
					colors={[GLOW_BG_COLOR, GLOW_COLOR, GLOW_COLOR, GLOW_BG_COLOR]}
					start={0}
					end={360 * glowSize}
					transform={animatedRotation}
				/>
			</RoundedRect>
		);
	};

	return (
		<Canvas style={{ flex: 1, backgroundColor: BACKGROUND_COLOR }}>
			<Group
				origin={{ x: screenWidth / 2, y: screenHeight / 2 }}
				transform={[{translate: [(screenWidth - width) / 2, (screenHeight - height) / 2]}]}
			>
				{/* Blurred Glow */}
				<Group>
					<GlowGradient />
					<Blur blur={blurRadius} />
				</Group>

				{/* Outline */}
				<GlowGradient />

				{/* Box overlay */}
				<RoundedRect
					r={10}
					x={5}
					y={5}
					width={width - 10}
					height={height - 10}
					color={BOX_COLOR}
				/>
			</Group>
		</Canvas>
	);
};

export default GlowingBorder;

[wcandillon]

This is really cool @harrisbaird :)

[michalstypa]

@harrisbaird Looks great! Do you have an updated version of this? The snack is not working and I can't get this to work with locally either, getting a single animation frame frozen in time. Seems like the component is not getting re-rendered despite transform={animatedRotation}. animatedRotation is changing when logged.

[aarkalyk]

@michalstypa tweaked the transform prop of the Group. Works on with the latest version

import React, { useEffect } from "react";
import { Dimensions } from "react-native";

import {
  Blur,
  Canvas,
  Group,
  RoundedRect,
  SweepGradient,
  vec,
} from "@shopify/react-native-skia";
import {
  Easing,
  useDerivedValue,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const { width: screenWidth, height: screenHeight } = Dimensions.get("window");

const GLOW_COLOR = "#1976edFF";
const GLOW_BG_COLOR = "#1976ed00"; // Should be the same color as GLOW_COLOR but fully transparent
const BACKGROUND_COLOR = "#1D1E22";
const BOX_COLOR = "#292a2e";

export const GlowingBorder = ({
  width = 200,
  height = 200,
  glowSize = 0.2,
  blurRadius = 20,
}) => {
  const rotation = useSharedValue(0);

  const centerX = width / 2;
  const centerY = height / 2;
  const centerVec = vec(centerX, centerY);

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(2, {
        duration: 4000,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, []);

  const animatedRotation = useDerivedValue(() => {
    return [{ rotate: Math.PI * rotation.value }];
  }, [rotation]);

  const animatedGroupTransform = useDerivedValue(() => {
    return [
      {
        translateY: (screenWidth - width) / 2,
        translateX: (screenHeight - height) / 2,
      },
    ];
  }, [width, height]);

  const GlowGradient = () => {
    return (
      <RoundedRect r={10} x={0} y={0} width={width} height={height}>
        <SweepGradient
          origin={centerVec}
          c={centerVec}
          colors={[GLOW_BG_COLOR, GLOW_COLOR, GLOW_COLOR, GLOW_BG_COLOR]}
          start={0}
          end={360 * glowSize}
          transform={animatedRotation}
        />
      </RoundedRect>
    );
  };

  return (
    <Canvas style={{ flex: 1 }}>
      <Group
        origin={{ x: screenWidth / 2, y: screenHeight / 2 }}
        transform={animatedGroupTransform}
      >
        {/* Blurred Glow */}
        <Group>
          <GlowGradient />
          <Blur blur={blurRadius} />
        </Group>

        {/* Outline */}
        <GlowGradient />

        {/* Box overlay */}
        <RoundedRect
          r={10}
          x={5}
          y={5}
          width={width - 10}
          height={height - 10}
          color={BOX_COLOR}
        />
      </Group>
    </Canvas>
  );
};