Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
timeline-composer
Advanced tools
A small collection of React components for declaratively constructing high-level animation timelines with repetitions, delays, and auto-removing elements.
You can use Timeline Composer in any type of React project. Here's an example where it's used to orchestrate a staggered VFX Composer animation:
<Lifetime seconds={5}>
<SmokeRing />
<Fireball />
<Delay seconds={0.3}>
<CameraShake decay />
<Fireball />
<Delay seconds={0.2}>
<Rocks />
<SmokeCloud />
</Delay>
</Delay>
</Lifetime>
requestAnimationFrame
-based ticker with clamped frame deltas and optional time scaling.1Simply add the timeline-composer
package using your favorite package manager.
yarn add timeline-composer
npm add timeline-composer
pnpm add timeline-composer
Delays rendering its children for the specified amount of time.
<Delay seconds={2.5}>
<p>I will only render after 2.5 seconds!</p>
</Delay>
Repeats (unmounts and re-mounts) its children for the specified number of times, with the specified delay between each repetition.
<Repeat seconds={2.5} times={3}>
<p>
I will automatically unmount and re-mount every 2.5 seconds, and stop after showing 3
times, because that is clearly enough!
</p>
</Repeat>
The default for times
is Infinity
, so it will repeat forever:
<Repeat seconds={2.5}>
<p>I will repeat forever.</p>
<p>Have a random number: {Math.random()}</p>
</Repeat>
Will render its children immediately, but remove them after the specified time.
<Lifetime seconds={2.5}>
<p>I'm only here for 2.5 seconds. Cya!</p>
</Lifetime>
Things get a little more interesting when you combine these.
<Lifetime seconds={10}>
<Repeat seconds={0.5}>
<Lifetime seconds={0.25}>
<p>I miss the blink tag!</p>
</Lifetime>
</Repeat>
</Lifetime>
<Repeat seconds={1}>
<Lifetime seconds={0.5}>
<p>See</p>
</Lifetime>
<Delay seconds={0.5}>
<p>Saw</p>
</Delay>
</Repeat>
Delays can be nested to create a waterfall of animations.
<Delay seconds={1}>
<p>One...</p>
<Delay seconds={0.5}>
<p>Two...</p>
<Delay seconds={0.5}>
<p>...three!</p>
</Delay>
</Delay>
</Delay>
Timeline Composer uses the PNPM package manager. After cloning the repository, you can get a development environment up and running by running the following commands:
pnpm install
pnpm dev
Timeline Composer is written and maintained by Hendrik Mans. If you have questions, email me at hendrik@mans.de, or find me on Twitter.
Copyright (c) 2022 Hendrik Mans
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Time scaling is work in progress. ↩
FAQs
Composable timelines for React.
The npm package timeline-composer receives a total of 3 weekly downloads. As such, timeline-composer popularity was classified as not popular.
We found that timeline-composer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.