Lifetime

.changeset/lazy-chicken-vanish.md

@@ -0,0 +1,5 @@
+---
+"vfx": patch
+---
+
+**New:** `<Lifetime seconds={...}>` will give its children the specified lifetime and then unmount them.

apps/examples/src/effects/Explosion.tsx

@@ -2,7 +2,14 @@ import { CameraShake } from "@react-three/drei"
 import { GroupProps } from "@react-three/fiber"
 import { between, plusMinus, power } from "randomish"
 import { Color, MeshStandardMaterial, Vector3 } from "three"
-import { Delay, Emitter, MeshParticles, ParticlesMaterial, Repeat } from "vfx"
+import {
+  Delay,
+  Emitter,
+  Lifetime,
+  MeshParticles,
+  ParticlesMaterial,
+  Repeat
+} from "vfx"
 
 const gravity = new Vector3(0, -20, 0)
 const direction = new Vector3()
@@ -145,30 +152,32 @@ const SmokeCloud = () => (
 
 const Explosion = (props: GroupProps) => (
   <group {...props}>
-    <SmokeRing />
-
-    <Delay seconds={0.1}>
-      <Fireball />
-
-      <CameraShake
-        maxYaw={0.05}
-        maxPitch={0.05}
-        maxRoll={0.05}
-        yawFrequency={10}
-        pitchFrequency={20}
-        rollFrequency={2}
-        decayRate={2.5}
-        decay
-      />
-
-      <Delay seconds={0.2}>
-        <Dirt />
+    <Lifetime seconds={3}>
+      <SmokeRing />
+
+      <Delay seconds={0.1}>
+        <Fireball />
+
+        <CameraShake
+          maxYaw={0.05}
+          maxPitch={0.05}
+          maxRoll={0.05}
+          yawFrequency={10}
+          pitchFrequency={20}
+          rollFrequency={2}
+          decayRate={2.5}
+          decay
+        />
 
         <Delay seconds={0.2}>
-          <SmokeCloud />
+          <Dirt />
+
+          <Delay seconds={0.2}>
+            <SmokeCloud />
+          </Delay>
         </Delay>
       </Delay>
-    </Delay>
+    </Lifetime>
   </group>
 )
 

packages/vfx/src/utilities/Delay.tsx

@@ -7,11 +7,7 @@ type DelayProps = {
   onComplete?: () => void
 }
 
-export const Delay: FC<DelayProps> = ({
-  seconds = 0,
-  onComplete,
-  children
-}) => {
+export const Delay: FC<DelayProps> = ({ seconds, onComplete, children }) => {
   const ready = useDelay(seconds, onComplete)
   return ready ? <>{children}</> : null
 }

packages/vfx/src/utilities/Lifetime.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react"
+import { ReactNode } from "react"
+import { useDelay } from "./Delay"
+
+type LifetimeProps = {
+  children?: ReactNode
+  seconds: number
+}
+
+export const Lifetime: FC<LifetimeProps> = ({ children, seconds }) => {
+  const ready = useDelay(seconds)
+
+  return ready ? null : <>{children}</>
+}

packages/vfx/src/utilities/index.ts

@@ -1,2 +1,3 @@
 export * from "./Delay"
+export * from "./Lifetime"
 export * from "./Repeat"