diff --git a/.changeset/lazy-chicken-vanish.md b/.changeset/lazy-chicken-vanish.md
new file mode 100644
index 000000000..cff9992f6
--- /dev/null
+++ b/.changeset/lazy-chicken-vanish.md
@@ -0,0 +1,5 @@
+---
+"vfx": patch
+---
+
+**New:** `` will give its children the specified lifetime and then unmount them.
diff --git a/apps/examples/src/effects/Explosion.tsx b/apps/examples/src/effects/Explosion.tsx
index bef94146a..96787376c 100644
--- a/apps/examples/src/effects/Explosion.tsx
+++ b/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) => (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
+
-
+
)
diff --git a/packages/vfx/src/utilities/Delay.tsx b/packages/vfx/src/utilities/Delay.tsx
index e6698e870..4b7e0c806 100644
--- a/packages/vfx/src/utilities/Delay.tsx
+++ b/packages/vfx/src/utilities/Delay.tsx
@@ -7,11 +7,7 @@ type DelayProps = {
onComplete?: () => void
}
-export const Delay: FC = ({
- seconds = 0,
- onComplete,
- children
-}) => {
+export const Delay: FC = ({ seconds, onComplete, children }) => {
const ready = useDelay(seconds, onComplete)
return ready ? <>{children}> : null
}
diff --git a/packages/vfx/src/utilities/Lifetime.tsx b/packages/vfx/src/utilities/Lifetime.tsx
new file mode 100644
index 000000000..bc44c9336
--- /dev/null
+++ b/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 = ({ children, seconds }) => {
+ const ready = useDelay(seconds)
+
+ return ready ? null : <>{children}>
+}
diff --git a/packages/vfx/src/utilities/index.ts b/packages/vfx/src/utilities/index.ts
index f5bd4a21e..b3a0a7ffd 100644
--- a/packages/vfx/src/utilities/index.ts
+++ b/packages/vfx/src/utilities/index.ts
@@ -1,2 +1,3 @@
export * from "./Delay"
+export * from "./Lifetime"
export * from "./Repeat"