Avafe

Game developer, creator of cool things

Rorooms

Loneka

Poser!

OnyxUI

Scribel

NeoHotbar

Climb Of Chaos

Kitty Dash

RbxSnips

avafe.me v2

Devcember 2023

Devcember 2022

avafe.me v1

Made with TS, Svelte, Tailwind and DaisyUI
Source code available on Github
✌️

local OnyxUI = script.Parent.Parent local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) local PubTypes = require(OnyxUI.Utils.PubTypes) local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring local Image = require(script.Parent.Image) local CanvasGroup = require(script.Parent.CanvasGroup) local Icon = require(script.Parent.Icon) export type Props = Image.Props &amp; { Image: PubTypes.CanBeState&lt;string&gt;?, RingEnabled: PubTypes.CanBeState&lt;boolean&gt;?, RingColor: PubTypes.CanBeState&lt;Color3&gt;?, RingThickness: PubTypes.CanBeState&lt;number&gt;?, IndicatorEnabled: PubTypes.CanBeState&lt;boolean&gt;?, IndicatorColor: PubTypes.CanBeState&lt;Color3&gt;?, IndicatorIcon: PubTypes.CanBeState&lt;string&gt;?, IndicatorIconColor: PubTypes.CanBeState&lt;Color3&gt;?, IndicatorCornerRadius: PubTypes.CanBeState&lt;UDim&gt;?, } return function(Props: Props) local EnsuredProps = { Image = EnsureValue(Props.Image, &quot;string&quot;, nil), RingEnabled = EnsureValue(Props.RingEnabled, &quot;boolean&quot;, false), RingColor = EnsureValue(Props.RingColor, &quot;Color3&quot;, Themer.Theme.Colors.Primary.Main), RingThickness = EnsureValue(Props.RingThickness, &quot;number&quot;, Themer.Theme.StrokeThickness[&quot;2&quot;]), IndicatorEnabled = EnsureValue(Props.IndicatorEnabled, &quot;boolean&quot;, false), IndicatorColor = EnsureValue(Props.IndicatorColor, &quot;Color3&quot;, Themer.Theme.Colors.Primary.Main), IndicatorCornerRadius = EnsureValue( Props.IndicatorCornerRadius, &quot;UDim&quot;, Computed(function() return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) end) ), IndicatorIcon = EnsureValue(Props.IndicatorIcon, &quot;string&quot;, nil), IndicatorIconColor = EnsureValue(Props.IndicatorIconColor, &quot;Color3&quot;, Colors.White), } return Image(CombineProps(Props, { Name = &quot;Avatar&quot;, Image = EnsuredProps.Image, Size = Computed(function() return UDim2.fromOffset(Themer.Theme.TextSize[&quot;4.5&quot;]:get(), Themer.Theme.TextSize[&quot;4.5&quot;]:get()) end), BackgroundColor3 = Themer.Theme.Colors.Neutral.Dark, StrokeEnabled = EnsuredProps.RingEnabled, StrokeColor = Spring(EnsuredProps.RingColor, Themer.Theme.SpringSpeed[&quot;0.5&quot;], Themer.Theme.SpringDampening), StrokeThickness = Spring( EnsuredProps.RingThickness, Themer.Theme.SpringSpeed[&quot;0.5&quot;], Themer.Theme.SpringDampening ), CornerRadius = Computed(function() return UDim.new(0, Themer.Theme.CornerRadius[&quot;1&quot;]:get()) end), [Children] = { Computed(function() if EnsuredProps.IndicatorEnabled:get() then return CanvasGroup { Name = &quot;Indicator&quot;, BackgroundColor3 = Spring( EnsuredProps.IndicatorColor, Themer.Theme.SpringSpeed[&quot;0.5&quot;], Themer.Theme.SpringDampening ), BackgroundTransparency = 0, Size = UDim2.fromScale(0.25, 0.25), AutomaticSize = Enum.AutomaticSize.None, AnchorPoint = Vector2.new(1, 1), Position = UDim2.fromScale(1, 1), AspectRatio = 1, CornerRadius = EnsuredProps.IndicatorCornerRadius, [Children] = { Icon { Image = EnsuredProps.IndicatorIcon, ImageColor3 = EnsuredProps.IndicatorIconColor, ImageTransparency = Computed(function() if EnsuredProps.IndicatorIcon:get() then return 0 else return 1 end end), Size = UDim2.fromScale(1, 1), AnchorPoint = Vector2.new(0.5, 0.5), Position = UDim2.fromScale(0.5, 0.5), }, }, } else return end end, Fusion.cleanup), }, })) end