What is Seam?
Seam is a lightweight reactive state library with built-in animations and more. Easily create impactful visuals and simple-yet-scalable states.
Create cause and effect with reactive states
Declare sources and effects that react to each other dynamically and on their own.
local Array = Scope:Value({})
local TotalValue = Scope:Computed(function(Use)
local Total = 0
for _, Value : number in Use(Array) do
Total += Value
end
return Total
end)
print(TotalValue.Value) -- 0
Array.Value = {1, 2, 3}
print(TotalValue.Value) -- 6
Array.Value = {5, 5}
print(TotalValue.Value) -- 10
Animate easily from values, not manually
Create animations that automatically change whenever state values change, making it easy to move things around without doing it yourself.
UI Button Snippet
-- We store the state of the button in a Seam value
local State = Value("Idle")
-- Making the springs for size and rotation
local SizeSpring = Spring(Computed(function(Use)
local CurrentState = Use(State) -- Can be either "Idle", "Hover", or "Press"
if CurrentState == "Idle" then
-- Default size
return UDim2.new(0.1, 0, 0.05, 0)
elseif CurrentState == "Hover" then
-- Size when hovering
return UDim2.new(0.1, 15, 0.05, 15)
elseif CurrentState == "Press" then
-- Size when holding mouse or pressing
return UDim2.new(0.1, -10, 0.05, -10)
end
end), 18, 0.4)
local RotationSpring = Spring(Computed(function(Use)
local CurrentState = Use(State) -- Can be either "Idle", "Hover", or "Press"
if CurrentState == "Idle" then
-- Default rotation
return 0
elseif CurrentState == "Hover" then
-- Rotation when hovering
return 0
elseif CurrentState == "Press" then
-- Rotation when holding mouse or pressing
return 3
end
end), 10, 0.3)
-- We make the button programatically here, but you can
-- also use an existing button you designed if you want!
local ExampleButton = New("TextButton", {
Text = "Hello, world!",
BackgroundColor3 = Color3.fromRGB(100, 150, 255),
BorderSizePixel = 0,
AnchorPoint = Vector2.new(0.5, 0.5),
Position = UDim2.fromScale(0.5, 0.8),
TextScaled = true,
Font = Enum.Font.BuilderSansBold,
AutoButtonColor = false,
Parent = Gui, -- A screen gui in player gui that we made beforehand
-- Making a bouncy size
Size = SizeSpring,
-- Making a bouncy rotation
Rotation = RotationSpring,
-- Connect our four events to change the state
[OnEvent "MouseEnter"] = function()
State.Value = "Hover"
end,
[OnEvent "MouseLeave"] = function()
State.Value = "Idle"
end,
[OnEvent "MouseButton1Down"] = function()
State.Value = "Press"
end,
[OnEvent "MouseButton1Up"] = function()
State.Value = "Idle"
SizeSpring.Value += UDim2.fromOffset(50, 50) -- Impulse size spring, giving it a pop
RotationSpring.Value = math.random(-10, 10) -- And same for rotation spring
end,
[Children] = {
-- Add a UI padding,
New("UIPadding", {
PaddingTop = UDim.new(0.1, 0),
PaddingLeft = UDim.new(0.1, 0),
PaddingBottom = UDim.new(0.1, 0),
PaddingRight = UDim.new(0.1, 0),
}),
-- and a UI corner
New("UICorner", {
CornerRadius = UDim.new(0.1, 0),
})
}
})
Create repeatable ordered actions with sequences
Take advantage of event sequences, built into Seam, in order to declare actions in order, with or without looping.
Moving platform snippet
local AlphaTarget = Scope:Value(0)
local AnimatedAlpha = Scope:Tween(AlphaTarget, TweenInfo.new(PLATFORM_MOVE_TIME))
local Bezier = Scope:Bezier(AnimatedAlpha, StartPoint.Position, MidPoint.Position, EndPoint.Position)
local Platform = Scope:New(workspace:WaitForChild("Platform"), {
Position = Bezier,
}) -- An existing part in workspace
local Animation = EventSequence({
{5, function()
AlphaTarget.Value = 1
end},
{5, function()
AlphaTarget.Value = 0
end},
})
Animation.Looped = true
Animation:Play()
Manage memory with scopes
Scopes allow you to freely create states and instances, store userdata, and more, and then automatically clean them up when the scope is destroyed. Scopes can even have inner scopes, which act as children.
local MainScope = Scope(Seam)
-- Making a branch of the main scope
local DecalsScope = MainScope:InnerScope()
for _ = 1, 10 do
local MyPart = MainScope:New("Part", {
Size = Vector3.new(5, 5, 5),
Anchored = true,
Position = AnimatedPartPosition,
Parent = workspace,
Color = Color3.fromRGB(255, 100, 100),
[Children] = {
-- We changed the below scope from MainScope to DecalsScope
DecalsScope:New("Decal", { -- âť—
Texture = "rbxassetid://32012505",
Face = "Front",
})
}
})
end
-- Destroys the decals, but not the parts
DecalsScope:Destroy()
-- Destroys the parts AND the decals
MainScope:Destroy()
And more!
You can do lots with Seam as well, including:
- Style sheets
- Components
- Async state value management
- Property/attribute output
- Debugging
- And more!
Why try this out? Why does this exist?
Seam is three parts: states, animation, and component management.
Using states is a great way to solve many messy systems, especially frontend, because reactivity can be directly hooked into instances and components. You can use Seam to:
- Create source and reactive states to create a control flow for information
- Hook states directly to instances, which prevents you from manually needing to update instances
- Treat animation as states, resulting in an easy way to get things moving
- Create and use reusable components to simplify a codebase
- Explicitly define cause and effect, improving readability of code
Seam was originally built for UI and has since expanded to be for your entire game, both server and client. Seam states are simple and generic, meaning they can be used in many different places. Compared to other state libraries, Seam is much more feature-rich, flexible, and more performant.
Your job is to solve problems without overengineering, and Seam can help with that!
Are there any known issues? What do I do if I come across any?
Bugs are always being squashed!
If you ever find any issues, please report them to me in my DMs, or in the replies below! Seam is also open-sourced, so if you want to contribute fixes and more, check out the repository here:
Need help?
You can get support and more by participating in Seam’s thread in my support server: iGottic OSS
Once you join that server, navigate to Projects → Seam.
Any other questions and comments outside of that can be placed in the replies below!
Where do I start?
View documentation, installation instructions, tutorials, and more at Seam’s website:
